как дебажить React приложения

У меня возник вопрос, как правильно дебажить react, вот поставил я деббагер здесь

  debugger
  return (
    <div className="App">
      {posts.length && posts.map(item => (
        <Post key={item.id} title={item.title} body={item.body} />
      ))}
    </div>
  );

нажимаю f10 спускаюсь вниз и дальше улетаю на кучу других файлов в которых вообще не мой код, понятное дело, что это код реакта и он типа тоже выполняется "под капотом", но мне то зачем это видеть, почему я должен надимать раз 20 f10, переходя по вкладками типа: react-dom-development, atoms.js, playback.js... что это и зачем мне это и как это скипнуть, да и ещё такое момент, вот хочу я посмотреть что сейчас лежит в title={item.title} или непосредственно в item, но я не могу этого сделать, если я навожу курсор на item он ничего не показывает, как это вообще работает, вы все с этим живете или я один чего-то не знаю?