• 動画内4:00から
    の説明で、redux-devtoolsを追加しておけ...
  • あんだーあんだー 
    動画内4:00からの説明で、redux-devtoolsを追加しておけば、chromeでの開発ツールでReactというのが出てきてcomponentの構造を見ることができる~とありますが、サンプルコードをダウンロードし、npm installしてからgulpコマンドを打って起動し、開発ツールを開いても、Reactの欄が出てきません。
    サンプルコードをダウンロードしてからは、gulpのバージョンを最新の4.0.2に変更、package.jsonのbabel-preset-2015をbabel-preset-envに変更、それに伴いpackage.jsonとwebpack.config.jsの2015の部分をenvに変更、またgulpfile.babel.jsをgulpコマンドで使えるように一部変更した程度で、直接redux-devtoolsに影響を与えるような変更はしていません(端末はMacbookを使い、ブラウザはchromeです)
    redux-devtoolsを最新の3.7.0に変更しても結果は変わりませんでした。
    これはchromeの仕様が変わったのでしょうか?
    ググってみたところ、chromeの拡張機能としてReact Developer ToolsとRedux DevToolsがあり、同じような機能があるように見受けられるのですが…
    https://eh-career.com/engineerhub/entry/2017/05/30/110000#パネルの追加
    それとも開発ツールのどこかにあるのでしょうか
    ご教授いただければ幸いです。
    回答 1

    ウェブカツコーチ 
    講師からの回答
    >chromeの拡張機能としてReact Developer ToolsとRedux DevToolsがあり、同じような機能があるように見受けられるのですが

    このChromeの拡張機能を入れることで開発者ツール内にこれらツールを使用するためのタブが現れます。なお現在のRedux DevToolsやReact Developer Toolsでは「React」とは表記されていませんね。Redux DevToolsの機能は「Redux」として、React Developer Toolsの機能としては「Components」「Profiler」として選択タブに表記されています。
    位置は開発者ツール内の「Elements]、「Console」などの並びにありますし、Chromeウェブストアのキャプチャなどを参考にして探しましょう。