開発者ツールで修正して、ローカルのソースコードに反映するには？

※ Google Chrome/Chromium限定です

Google ChromeのDevToolsにはWorkspaceという機能が備わっています。フォルダを指定してDevTools上に登録し、編集できるようにする機能です。

使い方は Sources タブで Add Folder to Workspaceを選択します。

ディレクトリへのアクセス権限が求められますので、許可します。

フォルダを読み込んだら、さらにファイルを選択して Map to Network Resource を選択します。

そして現在開いているURLと関連づけます。

これでSourcesタブの中からWorkspaceに登録し、ネットワークアクセスしているファイルは一覧から消えます。なお登録後は一度リスタートする必要があります。

後は通常のエディタのようにファイルを編集して保存ができます。

ファイルのネットワーク読み込みや実行時間にジャンプすることもできます。マッピングされているからこそですね。

編集できるファイルはHTML/JavaScript/スタイルシートファイルなどになります。Workspaceが手に馴染んだ方であれば、開発からテスト、デバッグまですべてGoogle Chrome上で済んでしまいます。