2021年09月23日 更新

Chromeがソースコードエディタになる

どうも、クラゲジュニアです。

Chromeだけでソースコードを編集可能です。 ライブコーディングでブラウザとコードエディタの切り替えが面倒、デスクトップ表示できない場面等で役立ちます！

[TOC]

ソースコードをフォルダに入れる

ここがポイントです。
この後に行うドラッグ&ドロップはファイルではなくフォルダで行う必要があります。

HTMLファイルをフォルダcodeに入れている例です。

※Macでも同様

DevToolsのSources表示

HTMLをChromeで開き、DevToolsのSourcesを選択します。
DevToolsはF12もしくはCtrl + Shift + I で開きます。

※Macの場合は option + command + I

フォルダをドラッグ&ドロップ

リクエストを許可してからOpen file

許可を押し、Ctrl + P を入力します。

※Macの場合は command + P

ファイルを選ぶ

編集可能になる

ただし、左側のHTML画面に編集を反映されるには、Ctrl + S で保存後、ブラウザの更新ボタンもしくはF5等でリロードする必要があります。

※Macの場合は command + S

（お好み）ダークモードに変更

歯車アイコン > Preferences > Theme から Dark を選択し、DevToolsをリロードすると反映されます。

その他

HTMLファイル以外

フォルダにファイルを置けば、Ctrl + P で開くことによりHTML以外のソースコードも編集できます。

※Macの場合は command + P

Devtoolsのフォントサイズ

Macの場合はちょっと分かりにくいので注意

• Windowsの場合は Ctrl + + で拡大、Ctrl + - で縮小
• Macの場合は command + ^ で拡大、command + - で縮小

以上です。