※スマホ対応はしてません。

タグ: VS Code

VS Codeの中でブラウザーを開いてCSS開発(ひとり DevTools Advent Calendar 2020 – 22日目)

カテゴリー: CSS

22 日目の記事です。

VS Code はウェブ開発に便利だな~、いっそブラウザーのタブも表示できないかな~、そう考えのあなたに朗報です。できます。

題名のとおり MS Edge を使うんだけど、macOS など Edge を導入していない場合は Chrome で代用できます。

デモプロジェクト

よければこちらご利用ください。昨日のに追加しました。サーバーは npm run start ないし node server.js で起動します。

本記事に沿って設定するか、あるいは .vscode.example/ を .vscode/ へコピーすればすぐデバッグ開始できます。

Microsoft Edge Tools で VS Code 内にブラウザーの画面を開く

こちらがウェブページの画面と Elements パネルを VS Code のひとつのタブとして表示できるようにする拡張です。VS Code と同じく Microsoft 謹製です。大丈夫です、Mac でも使えます。

  1. インストール
    1. VS Code サイドバーの Extensions (Ctrl+Shift+X) を開く
    2. “Microsoft Edge Tools” (by Microsoft) を検索(上記のもの)
    3. インストール
  2. 開く
    1. サイドバーの Microsoft Edge Tools を開く
    2. “+” の Open a new tab ボタンを押す

Edge が用意されている環境であれば、そのウィンドウとは別に VS Code で Edge DevTools というタブが開きます。空の画面も表示されているはず。アドレスバーに URL を入力して Elements パネルで遊んでみてください。

なお開くと最初は about:blank が表示されるんですが、任意の URL へ変更可能です。後でやりましょう。

Mac で Edge をインストールしていない場合は後述する「Mac でやる」の方法を試してみてください。

試す

デモプロジェクトなら npm run start でデモ用のウェブサーバーが起動します。http://localhost:8080/ を開いたタブの URL へ入力し移動してください。

VS Code 内に localhost のページを表示している様子。このまま DOM ツリーを触ったり Styles ペインで確認したりできる。

CSS ファイルをエディターで開くようにする

せっかく VS Code の中で Elements パネルを表示してるのに、初期状態ではソースコードは見えるだけです。Elements パネル Styles ペインでスタイルの定義箇所(ファイル名と行番号)をクリックしたら、VS Code で即開けるようにできます。

  1. ファイルマップの設定
    1. 設定 (Ctrl+,) を開く
    2. (User ではなく)Workspace タブを選択
    3. 左側 Extensions → Microsoft Edge Tools
    4. Source Map Path Overrides → Edit in settings.json
    5. 設定追加(ちょい長いので次節へ分けます)
    • プロジェクトルートに .vscode/settings.json ファイルが生成される
  2. DevTools 再起動
    1. エディター部分の Edge DevTools タブを閉じる(開いていれば)
    2. サイドバー Microsoft Edge Tools → 対象のドキュメント → 右端 Attach and open Microsoft Edge Tools ボタンを押す

設定画面。Source Map Path Overrides の設定は GUI では行えず、設定ファイルを開く必要がある。

設定はたぶん sourceMapPathOverrides で検索しても出ます。

あと、設定は User ではなく Workspace で保存するようにしてください。じゃないと同じマシンの全プロジェクトで有効になってしまう。

Source Map Path Overrides の設定

さて Source Map Path Overrides の設定なんですが、開いた JSON ファイルをこんな↓風にしてください。(新規作成したものとします。既存のものがある場合は適宜対応願います。)sourceMapPathOverrides の中身は初期値として何行か追加されてると思うんですが、それは削除しても残しておいても構いません。

  • .vscode/settings.json
{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "http://localhost:8080/*": "${workspaceFolder}/public/*"
  }
}

正直これのマップ設定の感覚がよくわかってないんですが、デモプロジェクトならこれで動くはず。他で使う場合はポート番号 8080 やファイルの置き場所 /public/ なんかを変更してください。

CRA

create-react-app で作成したアプリの場合の設定も載せておきます。

{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "webpack://src/*": "${workspaceFolder}/src/*"
  }
}

CRA は webpack で合成とかなんかしたファイルになるんですが、そこから source maps の仕組みを用いて元のコードを保存しています。その保存された元のコード (webpack:…) をさらに実際のファイルへ対応マップするのが上記です。

その他の環境

Elements パネル Styles ペインで表示されるファイルへカーソルを乗せるとパスが表示されます。これを件の設定で利用する感じっぽい。

App.css のパスとして webpack://src/App.css が表示される様子。

Network パネルを表示する

ところでタブは Elements パネルだけですが、Network パネルを出すこともできます。

  1. Network 利用の設定
    1. Workspace → Extensions → Microsoft Edge Tools
    2. Enable Network をオンに
  2. DevTools 再起動

件の設定は、Settings の中で @ext:ms-edgedevtools.vscode-edge-devtools network で検索しても出てきます。

その他のパネル

出せないっぽい。全部出してくれていいのになあ。

最初に開く URL

設定の Default Url ってやつで最初の URL を指定します。http://localhost:8080/ とか。

なんかだめなとき

The tab is inactive

接続しているウィンドウのタブが非表示の間は利用できません。

見なくてもいいやってときは Headless モードを検討してください。別項参照。

CSS ファイル名をクリックしても開かない

マップが間違ってる。うーん typo とかに気を付けてどうにか頑張ってください。

画面が消えた

DevTools 部分の左上 Toggle screencast を押してください。出したり消したりできます。

ページが真っ白

サーバー起動してないとか。

その他

JS のデバッグもしたい

JavaScript は VS Code 本体で開いてブレイクポイントを設置したりステップ実行したりできるので、それ使いましょう。

こちらをどうぞ。

今回のデモプロジェクトと同じものを使っているので、VS Code サイドバーの Run (Ctrl+Shift+D) と .vscode.example/launch.json を見てもらえればわかるかも。

逆に DevTools で編集したい

できます。簡単に言うと Sources パネルの左側サイドバーで Filesystem を使います。

こちらをどうぞ。

いっそブラウザーのウィンドウいらない

設定で Headless にチェックを入れるとヘッドレスモードになって、”+” ボタン押してもウィンドウが出てこなくなります。ウィンドウはなくても VS Code の中で画面は見えてますね。設定でオンオフするため機動性が低いのが玉にきず。

エディターでタブを閉じても見えないウィンドウは生き残っています。サイドバー Microsoft Edge Tools の一覧に表示されるので、Attach and open Microsoft Edge Tools ボタンで再度タブを開けます。

というわけで見えないし消えないウィンドウは “+” を押すたびに増えます。どうやって消すんだろ。VS Code 再起動したら消えました。(時間差があります。)

Edge じゃなくて Chrome がいい

できます。たぶん Chrome DevTools Protocol でやってるので。

Chrome を起動するときに --remote-debugging-port=9222 を付けて起動してください。そうするとサイドバー Microsoft Edge Tools の一覧に表示されます。Attach and open Microsoft Edge Tools ボタンを押せば接続完了です。

Mac でやる

ターミナルからこれ↓でリモートデバッグ用ポートを与えて起動できます。実行する前に Chrome はいったん終了させてください。

$ cd /Applications/Google Chrome.app/Contents/MacOS
$ open -a "Google Chrome" --args --remote-debugging-port=9222

やっぱり DevTools 丸ごと使いたい

ですよねー。今回紹介した拡張は機能を絞ってるけど、他に全部入りの DevTools タブを表示する拡張があります。こちら。

でも試したら真っ白で動かなかったんだよな。残念。あとスクリーンキャスト(画面)はないみたい。

マップわからん

pathMapping がそれっぽい設定なんだけど駄目で、sourceMapPathOverrides にして一通り動いた。

あとこの sourceMapPathOverrides を追加するときに初期値でいくつかの環境に対応した設定されててあら便利と思ったけどバージョンの違いか例えば / の数が違ってて動かなかったりした。うーん報告するべきなのか自分の環境がおかしいのか?

おしまい

正直いまいち痒いところに手が届かない気がしてます。あと外部モニター使える環境なので VS Code とブラウザーと両方同時に表示できるからそんなに必要に駆られていないというのもあるかも。

参考

VS Codeの中でJavaScript/Node.jsのデバッグまでする(ひとり DevTools Advent Calendar 2020 – 21日目)

カテゴリー: JavaScript

21 日目の記事です。

Chrome DevTools を使ってクライアント側に限らずサーバー側もデバッグできるんですが、それはそれとして開発中はエディターで開いたソースコードと行ったり来たりするのが面倒です。

VS Code なら Chrome DevTools (の機能)と連携して、エディター内でブレイクポイントを設置するなどできます。ちなみに DevTools の画面は今回出てきません。

先にまとめ

  • サーバー側もクライアント側も VS Code からデバッグできる
    • ブレイクポイントの設置
    • 変数の閲覧
    • ログ出力
  • Run パネルからデバッグ設定を作成、デバッグ実行
  • Next.js などビルドを行うものも、ファイル出力できれば

デモプロジェクト

よければこちらご利用ください。JavaScript と Node.js と両方用意してございます。サーバーは npm run start ないし node server.js で起動します。

本記事に沿って設定するか、あるいは .vscode.example/ を .vscode/ へコピーすればすぐデバッグ開始できます。

クライアント側(フロントエンド)をデバッグする

HTML と JS はこんな感じです。なんかこうボタンを押したらサーバーから JSON 取得してコンソールに表示します。

<p>
  <button id="fetchButton">Fetch</button>
</p>
const elFetch = document.querySelector("#fetchButton");

elFetch.addEventListener("click", async () => {
  const res = await fetch('/data.json');
  const json = await res.json();
  console.log('Fetched', json);
});

デバッグ設定

  1. サイドバーの Run パネル (Ctrl+Shift+D) を開く
  2. “create a launch.json file” を押す
    • 既に生成済みの場合は上部設定プルダウンで “Add configuration…” → “Chrome: Launch”
  3. “Chrome (preview)” を選択
  4. 生成された .vscode/launch.json の内容を編集
    • name
    • url
    • webRoot

launch.json 生成前の Run パネル。設定作成ボタンなどが表示される。

launch.json 生成後の Run パネル。デバッグ対象を選択して開始するボタンがある。

生成される launch.json はこんな感じです。これから webRoot と url、name を編集します。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

まずは webRoot 。今回のデモプロジェクトでは "${workspaceFolder}/public" としてください。ファイルが public/ にあるので。URL のパスが /script.js のとき、public/script.js がデバッグ対象のファイルと認識されるようになります。

url はブラウザーで開く URL です。先述のデモプロジェクトであれば "http://localhost:8080" です。

あと name は好きに付けて良いようなので、わかりやすく "Client" としときましょう。

完成品はこちら。

デバッグ開始

(デバッグ前に、画面を開けるようサーバーを起動しておいてください。先述のデモプロジェクトなら npm run start です。)

開始するにはサイドバー Run パネルの上部で name に設定したもの、”Launch Chrome…” だか “Client” だかを選択して、隣の Start Debugging ボタンを押します。

console.log() などは Debug Console (Ctrl+Shift+Y) へ出力されます。(パネルが出てこない場合はメニュー View → Debug Console から。)

デバッグ開始した様子。下部ステータスバーが橙色になり、デバッガーのポップアップも表示される。

ブレイクポイントとデバッグ

ブレイクポイントは行番号の左隣をクリックです。デファクトスタンダードの操作ですね。赤い丸ぽちが置かれます。

ブレイクポイントで止まっている間は DevTools の Sources パネルと同様、マウスカーソルを変数に乗せて内容を表示したり Run パネルの VARIABLES ペインから変数を書き換えたりができます。

デバッグ終了

ブレイクポイントの停止から復帰するにはポップアップの Continue ボタン (F5) を、デバッグ自体を終了するには Stop ボタン (Shift+F5) を押します。

はい楽しかったですね~~~。

サーバー側(バックエンド)をデバッグする

デバッグ設定

サーバー側のデバッグ設定も追加します。

  1. サイドバーの Run (Ctrl+Shift+D) を開く
  2. 上部設定プルダウンで “Add configuration…”
  3. “Node.js: Launch program”
  4. 生成された .vscode/launch.json の内容を編集
    • name
    • program

launch.json の configurations に追加されているはず。

program はサーバープログラムです。デモプロジェクトなら "${workspaceFolder}/server.js" でお願いします。"npm start" はここでは書けません。npm スクリプト実行なら別の type になります。(本稿では触れない。)

name はクライアント側と同じく "Server" にしときます。

迷ったら完成品をご確認ください。

デバッグ

Run パネルでサーバーの方が選択されていることを確認して Start Debugging ボタンを押してください。

あとはブレイクポイントの設置などクライアント側でやったのと同じ手順です。

サーバーとクライアント両方を同時に

設定があれば両方同時にデバッグ可能です。順に選択して Start Debugging するだけ。

Server と Client の両方をデバッグ開始すると、ポップアップでは操作対象を切り替えられるようになる。

その他

CRA とか Next.js とか

create-react-app、Next.js ともに、クライアント側はビルドされた結果がメモリー上におかれるため、webRoot を設定する先のディレクトリーがありません。webpack-dev-server の writeToDisk オプションを指定してファイルとして出力する必要があります。

CRA は eject するか、何だったか CRA の webpack の設定を変更できるようにする npm パッケージを導入して設定してください。

Next.js は next.config.js の設定でやれそう、と思って試したけどだめだった。よくわかってないので自分が間違ってる可能性が高い。うう。

一方 Next.js のサーバー側は簡単で、これ↓でデバッガーを利用可能でした。

// launch.json > configurations
{
  "name": "Next.js Server",
  "request": "launch",
  "runtimeArgs": ["run-script","dev"],
  "runtimeExecutable": "npm",
  "skipFiles": ["<node_internals>/**"],
  "type": "pwa-node"
},

Chrome: Attach

新しいウィンドウで開く代わりに既存のウィンドウへデバッガーを割り当てるってこともできます。

できますが、その場合は事前に「既存のウィンドウ」がデバッガーを受け付けるオプション --remote-debugging-port=9222 付きで起動していることが必要です。例えばこんなショートカットを用意します (Windows) 。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

ポート番号は launch.json の設定を合わせます。

うまく動かない?

ブレイクポイントを置こうとしても赤い丸が黒くなっちゃうことがあります。

ブラウザーで見てるファイルと VS Code で開いてるファイルとのマッチに失敗しているかも。そして失敗している原因はたぶんここらへん。

  • webRoot のパスが間違っている
  • サーバーがまだ起動していない
  • デバッグ用のウィンドウが複数開かれている

あとはビルドする系だと source maps のパスがおかしいとか……。

Edge も使える

Chrome 同様に Edge で開いてデバッグも可能です。

下地が同じ Chromium で、Chrome DevTools Protocol を共有しているから、のはず。未確認だけど Opera とかでも動くんじゃないですか。

おしまい

仕事のコードは source map がなんかおかしいのか、普通の DevTools では動くんだけどこのやり方駄目でした。使いたい……。

参考

npm installがENOENTとか変な失敗をするとき、VS Codeを閉じると良いかも。

カテゴリー: 開発環境

Windows/WSL1 + Ubuntu + VS Code という組み合わせでやってるんですが、しばしば npm install が失敗します。

npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path /mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/semver
npm ERR! dest /mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/.semver.DELETE
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, rename '/mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/semver' -&gt; '/mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/.semver.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ginpei/.npm/_logs/2020-09-30T18_57_36_471Z-debug.log

なんか一時ファイルっぽいし謎ですね。

原因はよくわかってないんですが、どこか(どこだっけ)で「VS Code のファイル監視が悪さをしている」ような話を聞いたことがあって、実際 VS Code を閉じた状態でこういうエラーに出くわしたことはないです。

というわけで VS Code を閉じてみてください。

  1. VS Code を閉じる
  2. VS Code 以外のターミナルから npm install
  3. 完了したら、VS Code を開く

Error persisting state: EACCES: permission denied, rename

他のパターンも置いておきます。これは npm install じゃなくて Gatsby のビルドで出てきたやつ。

warning Error persisting state: EACCES: permission denied, rename '/mnt/c/Users/ginpei/xxx/.cache/redux' -&gt; '/mnt/c/Users/ginpei/xxx/.cache/redux.bak'

対処は同じく VS Code を閉じてください。

[Windows] VS Code を閉じた状態でターミナルを利用する

VS Code 内のターミナルで実行しているのに VS Code を閉じるとそのまま npm install も終了してしまうので、他のターミナルが必要です。

  1. cmd.exe … Windows 標準の黒い画面。wsl コマンドとかで WSL を開く
  2. Windows Terminal … Microsoft 謹製のターミナルアプリ。複数タブ等、諸々便利でおすすめ
  3. tmux … Linux 内で動くターミナル多重化アプリ。一言で言うと「閉じても終了しないセッションを作る」ことができる

tmux が一番便利だけど CLI に慣れてないとつらいと思うので、一般には Windows Terminal をお勧めしておきます。いずれにしろ入れておいて損はないです。

おしまい

「VS Code のファイル監視が~」の件、ちゃんとした情報源があれば教えてください。

@ ts-checkを付けると、VS Codeが普通のJavaScriptもTypeScript扱いで見てくれるんだって。

カテゴリー: JavaScript

// @ts-check を書くと、JSファイルでもTSとしてvalidateしてくれるそうです。

(@tsのひとごめん。)

DOMノードどーすんの問題

引数もらって計算して結果を返すだけの関数ってならこれすげー便利で良いんだけど、 querySelector() 使うと対応が面倒な感じになる。これどうしたら良いかなあ。というかTSでもよく分からないや……。

const input = document.querySelecter('input#the-input');
console.log(input!.value); // -> Property 'value' does not exist on type 'Element'.

querySelecter() が返すのは Element 型なので、 <input> 用のプロパティが定義されていない。

一応、解決策としては instanceof で確認してやることで型が固定します。

const input = document.querySelecter('input#the-input');
if (!(input instanceof HTMLInputElement)) { return; }
console.log(input!.value);

ついでに null チェックもできて一石二鳥ではある。

JSじゃなくてTSの場合はジェネリクス <T> で書ける。

const input = document.querySelector<HTMLInputElement>('input#the-input')!;
input.value = 'Hello World!';

ただしこの場合は null の確認が必要。(これ↑は ! ですっ飛ばした。)

なんかもっと楽々書けないかなあ。そもそもReactやVueが全盛期の現代で querySelector() 自体をあんまり使わないか……。

Nuxt.js他で時計アプリ (PWA) を作ってみたよ。

カテゴリー: JavaScript

ええいや時計って……という感じはあるんだけど、とにかくNuxt.jsを使ってみたかったのです。あと自分では使う。

できあがったもの

アナログ時計が左に、デジタル時計が右に。あとポモドーロタイマー付き。

使った技術

ライブラリ、フレームワーク

ツール

ウェブ標準API

サービス

技術系感想

Nuxt.js

この記事の影響。

なんか久しぶりに「動くものがさくさく作れる」という快感を味わうことができたフレームワーク。Ruby on Railsにこなれてきた頃の快感を思い出しました。

vue-cli使って入れたんだけど、最初からディレクトリとか開発用サーバーとか、各種ビルドとか即時部分更新 (HMR) とか、追加のあれこれなしに書くだけですぐ動く。黒魔術的な感じなのもRailsっぽい。いや別にRailsと比べるものじゃないんだけど。

今回は静的HTML (SSR) でやったけど、そのうち動的なやつもやってみたい。Firebaseでホストすればできると聞いたような気がする? 未調査。別に # なURLでも構わないけども。

vue-cilで入れるやつのコマンド(公式ドキュメントより):

$ npx vue-cli init nuxt-community/starter-template my-project

Nuxt + PWA

こいつを yarn add するだけでわりとすぐ動いた。お手軽便利。これを導入するだけで用が済んでしまったので、ServiceWorkerも自前では書いてないです。

ドキュメントはあんまり親切じゃない感じがする。まだ使い方とかがあんまりわかってない。

Visual Studio Code

ずっとVimを使ってきたんだけど(最近はNeoVim)、ちょっと人に教えるのにこれはあれだよなーと思って「普通のエディター」として使い始めてみました。あらでも良いじゃない。

スクリーンショット。公式サイトから。

後発なうえに開発体制が盤石なだけあって、さすがに出来が良い。各種OSに対応している点、インストールしてすぐ使える点、プラグインが豊富かつ導入や管理も楽な点、日本語対応している点から、今後は人様にお勧めしていこうかなと思っております。

最初に導入してほしいプラグイン:

  • Code Spell Checker
  • EditorConfig
  • ESLint(JS系のひと向け)

ただ、スクロールがなかなかちょっと。これはCodeじゃなくてたぶんElectron for Windowsの問題で、Slack.exeなんかでも起こる。どうも onscroll で何かやってるとうまくスクロールが動かなくなるみたい。詳細未調査だけど、たしか自分が作ったアプリだとそんな感じだった。まあだいたいの人はMacだから問題ないね……。

あとVimプラグインはキー操作が衝突するんで、案の定アレでした。

CSS Grid

何度か使ったことあったかな。気がつけば一通りのブラウザサポートが揃っていたので。

CSS Gridは全てのモダンブラウザで動作する。画像はgrid-templateプロパティの場合。

今回複雑なレイアウトをしてはいないけれども、別にそんじょそこらの細かいところでも割と気軽に使えるので、今後はがしがし使って行きたい。

今回使ったのは右側半分。”T”の字に区切ってます。

GitHub Pages + Cloudflare

今回は全部静的ファイルなので、GitHub Pagesで公開してCloudflareでhttps化。

これも簡単にできて楽だったので、今後は同じようにサブドメインにどんどん生やしていく感じで色々作っていこうかなと思いました。

作業内容はこれ↓。

yarn

普段はnpmの方を使っているんだけど、今回はなんとなくこっちに。インストールが早いとかは聞いてるけれども、うーん特に不満はないけど利点を感じるほどでもなかった。npmも今はロックファイルあるし、普通にインストールしたら記録されるしなあ。

アプリの紹介

時計です。

ポモドーロのタイマー付きです。

おしまい

楽しかった。