LoginSignup
20

More than 5 years have passed since last update.

ウィンドウ切り替えんのめんどくさいねん。え、Google Chrome でファイルを直接編集できるって?

Last updated at Posted at 2018-08-27

tl;dr

  • chrome でhtmlとかjavascriptとかcssを直接編集できるぜってこと。
  • バリバリ書くわけじゃなかったら、結構有用。

環境

  • Windows 10
  • Google Chrome - 68.0.3440.106(Official Build) (64 ビット)
  • Google Chrome Canary - 70.0.3533.0(Official Build)canary (64 ビット)

まずは普通にファイル作成。(テスト用)

ファイル構造

:open_file_folder: root :page_facing_up: index.html
:file_folder: css :page_facing_up: style.css
:file_folder: js :page_facing_up: common.js

ファイル内容

:page_facing_up: /index.html

/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="js__outputArea"></div>

  <script src="js/common.js" async defer></script>
</body>
</html>

:page_facing_up: /css/style.css

/css/style.css
/* まだ白紙 */

:page_facing_up: /js/common.js

/js/common.js
(async function(){
    let outputArea = document.getElementById("js__outputArea");

    for(let i = 0; i < 100; i++){
        outputArea.innerHTML += await (function(){
            return new Promise(resolve=>{
                setTimeout(()=>{
                    resolve(`Hello World!<br>`);
                }, 100);
            });
        })();
    }
})();

ブラウザ(もちろんchromeで)読み込む。

無題4.png

はーい、こういうことっすねーーー。
このへたれプログラム

で、本題。

どうやって編集するのか。

Step1:

[F12]キー かなんかで、DeveloperToolを開く。
そして、[Source]タブをクリック。

無題5.png

Step2:

エクスプローラで、そのフォルダの親フォルダーを開く。

無題6.png

※ファイルのあるフォルダーではなく、上の階層のフォルダーを開いてください。

Step3:

そのフォルダを、chromeのDeveloperToolの中にドラッグドロップする。

無題7.png

Step4:

上にアラート的なバーが出るので、[許可]をクリック。
※もし[拒否]を押してしまっても、もう一度Step3をすれば大丈夫です。

無題8.png

Step5:

バーが消えたら、[Source]タブの中にある、[FileSystem]タブをクリックして、フォルダーが追加されていればOK!!

無題9.png

編集したいファイルをダブルクリック!!!

編集

編集したいファイルをダブルクリック!!!してから、普通に編集して保存([Ctrl]+[S])
リロード([F5])して反映。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20