Google Chrome Canary の DevTools バグレポートを提出したら大きなボーナスが・・・！

 

始めに：

この記事は前回の続きだ。

ただし引く継ぐのはバグレポートの件で、ここでは chromium のコメンテータから代替案として示された Google Chrome Canary（Chrome Canary）の DevTools の Local Overrides（ローカルオーバーライド）機能について説明する。

バグレポートで「今まで使っていたマッピングが使えなくなった」ということを報告した訳だが ―― バグとしては認められたようだ ―― それを提出しなかったら、 ローカルオーバーライドの使い方を独力で突き止めるのに、もっと長い時間がかかっただろう。

それどころか、まともに取り組まなかった可能性すらある（注1）。ちょと文法的にアレな英文レポートを一個提出しただけなのに、その見返りは思っていた以上に価値のあるものになった。

それから用語だが、私は今まで DevTools のことを「デベロッパーツール【検証】」と書いてきたが、ほとんどの資料で DevTools と書かれているので、私もそれに倣（なら）うことにした。

 

注1： 通常の Chrome DevTools では従来のマッピングが使用できる。
昨年の 12月にノーマル Chrome のマッピング機能は廃止された（記 2018/01/20）。

Chrome Canary DevTools に追加されたローカルオーバーライド機能：

Chrome Canary DevTools の Sources パネルには新しいタブ Filesystem タブと Overrides タブが追加された。従来は Sources タブ上で network と local 両方のリソースを扱っていたが、それがこの二つのタブに分割されることになったようだ。

その結果、それまで Sources タブで確立していた network リソース と local の filesystem リソースの間のマッピングは使えなくなった。代わりに Overrides タブに、マッピングの特徴を発展的に引き継いだローカルオーバーライド機能が追加された。

ここでは JavaScript を例に採って Overrides タブの使い方を説明する。

今まで Chrome DevTools 上での JavaScript のデバッグに苦労していた人は、下の概略を読むだけでオーバーライドのすごさが理解できるだろう。そしてすぐ使えるようになるはずだ。

DevTools の Overrides タブの使い方 ―― 概略：

使い方はいたって簡単だ。初めて使う時は次に示す手順を実行する。
手順の 4）と 5）は簡単なテスト方法とその結果を含んでいる。このテストは必須ではないので省略しても構わないが、今もデバッグで悩んでいる人はぜひ実行してみて頂きたい。

サラッと流したが、中に含めたテストは、実行するのが極めて難しかった  JavaScript の load イベントハンドラのデバッグが、簡単に実行できるようになったことを実証しているのだ。

実際に Chrome Dev Summit 2017 の動画では、プレゼンターの Paul Irish がその動作を実演して見せた時、聴衆から拍手と歓声があがっていた。

参考資料：

上の動画の説明を参考にしてアニメを作ってみたので、参考にして頂きたい。

おわりに：

この記事ではローカルオーバーライドの概略だけを説明した。とりあえず速報レベルの報告だと思って頂きたい。
そのうち図を用意してもう少し詳しく説明するつもりでいるが、その時は記事の本文も大きく書き換えるかも知れない。その旨一応事前にお断りしておく。

今後 Filesystem タブの使い方が分かったら、この記事に追加する形で報告したいと考えている。
それに、このローカルオーバーライドの登場で、私が今までに書いてきた記事の何本かは、Chrome Canary DevTools に関してはもう過去のものになってしまった。いったい何がそうなったのかということを説明する義務も、私にはあることだしね。