React Developer Toolsが動作しないときの対処法

背景

React.jsの概要を知りたいと思いReact.js & Next.js超入門 第2版を読みながらたまにサンプルコードを動作させたりしていました。

その本の中で、React Developer Toolsが紹介されていて、Chromeの拡張機能をインストールしました。しかし、利用環境によってはそのままで動作しなかったので、その点について記載します。

React.jsの動作環境

React.jsの動作環境はnpmを用いず、CDN上のreact.development.jsとreact-dom.development.jsを読み込むことで実現しました。

VSCodeでhtmlファイルを作成し、React.jsが動作するサンプルコードを記載して、そのファイルをブラウザに読み込ませて動作させていました。なのでURLはfile://で始まっています。

React Developer Toolsが動作しない

サンプルコードをブラウザで表示後、拡張機能のアイコンをクリックしようとしたら、以下のメッセージが表示されました。

This is a restricted browser page.
React devtools cannot access this page.

ん〜なんでしょうか、ちょっとわからないのでググってみると、stackoverflowに答えが見つかりました。

https://stackoverflow.com/questions/26347489/react-dev-tools-not-loading-in-chrome-browser

If you opened a local html file in your browser (file://...) then you must first open chrome extensions and check off "Allow access to file URLs".

設定が必要のようです。

拡張機能の設定

stackoverflowに書いてある通り設定してみます。

1. Chromeの拡張機能の一覧からReact Developer Toolsをクリック
2. 設定画面の下の方、ファイルの URL へのアクセスを許可するがオフになっているのでONにする
3. Chrome Developer Toolsを再起動する

以上になります。

Chrome Developer ToolsのElements、Consoleなどが表示されているところに、ComponentsとProfilerが表示されていることが確認できました。Reactのロゴが表示されているのでわかりやすいですね。

まとめ

ファイルのURLはあまり使わないと思いますが、最初に試すときはファイルを読み込ませるのが楽でいいですね。

React Developer Toolsは正しく使うことでReact.jsの理解が捗ると思うので、使い方をちゃんと身に付けたいと思います。