この投稿は別サイトからのクロス投稿です(クロス元:https://qiita.com/_lemon2003_/it...

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 ビット)

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

ファイル構造

     
root index.html
  css style.css
  js common.js

ファイル内容

/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>

/css/style.css

/* まだ白紙 */

/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で)読み込む。

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

で、本題。

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

Step1:

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

Step2:

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

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

Step3:

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

Step4:

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

Step5:

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

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

編集

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

関連記事

この記事へのコメント

まだコメントはありません
1
@lemon2003の技術ブログ
1
このエントリーをはてなブックマークに追加