ChromeのDevToolsの便利機能まとめ
-
clockmaker
- 28300
- 85
- 333
- 85
-
- いいね！85
池田 泰延
@clockmaker
ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。
広告の場所がわかる
池田 泰延
@clockmaker
Chromeの開発者ツールで地味に好きな機能はこれ。 「広告フレームをハイライト表示する」 サイト内の広告を赤く表示してくれます。いろんなサイトが広告を巧みに混ぜ込んでいるので面白いですよ！ pic.twitter.com/IFrHpHGl00
2023-01-21 09:19:01
拡大
広告を消せる
池田 泰延
@clockmaker
Chromeの開発者ツールの便利機能をもうひとつ紹介。 ［このサイトの広告ブロックを強制］をチェックすると、広告が消えます！ pic.twitter.com/vA2gpTnyLa
2023-01-25 09:37:57
拡大
拡大
拡大
重たいCSSセレクターがわかる(Edge)
池田 泰延
@clockmaker
Microsoft Edgeの独自機能(?)。開発者ツールで、セレクターの時間を計測できる。重たいCSSセレクターの検出に役立ちます。 1. 開発者ツールを開く 2. [パフォーマンス]タブを選択 3. 歯車を選択 4. [Enable advanced rendering instrumentation (slow)]を選択 5. 調べたい[スタイルの再計算]を選択 pic.twitter.com/ZjGRIRKgeX
2023-01-19 10:44:11
拡大
CSSが効かない理由がわかる
池田 泰延
@clockmaker
Chrome 108の開発者ツールが地味に良い進化をしています。 CSSが効かない場合、適用されないプロパティーが半透明となり、なぜ効かないのか教えてくれます。 初心者にとって重宝する機能では。 pic.twitter.com/uaF6YxIYQG
2022-12-01 13:24:52
拡大
池田 泰延
@clockmaker
Firefoxだと、Chromeより説明がわかりやすくて、MDNの解説ページヘリンクも張られています。 昔からこの機能が存在したのに、Firefoxが使われてなさすぎて涙目。 pic.twitter.com/UobkoM3Fyt
2022-12-02 01:07:21
拡大
JSライブラリ内部のコールスタックをデバッグ時に省略
池田 泰延
@clockmaker
Google Chrome 106がリリース。 開発者ツールの嬉しい新機能として、サードパーティー製JSライブラリのスタックトレースや、デバッグ時のコールスタックを省略表示できるようになりました。 ライブラリの内部コードが邪魔でデバッグしづらかったのが、改善します。 無視リストはカスタマイズ可能。 pic.twitter.com/FMKUjrGr0D
2022-09-28 17:29:50
拡大
ユーザー操作をリプレイ可能
池田 泰延
@clockmaker
Chromeのレコーダーパネルの進化がすごい。 ユーザー操作の記録や再現ができて、ステップ実行（Chrome 105の新機能）も可能。 不具合報告での再現手順はこれを使うのがいいのでは。 pic.twitter.com/Q2D4TewSFR
2022-08-31 10:22:52
池田 泰延
@clockmaker
開発者ツール内の［Recoder］パネルの操作は、JSONやJavaScriptファイルとして保存可能です。 ・他の人の操作を再現可能 ・ヘッドレスブラウザ（Puppeteer）で再現可能 pic.twitter.com/ttMIp6UxiS
2022-09-01 10:09:52
拡大
JS: エラーの末端まで追跡可能(Firefox)
池田 泰延
@clockmaker
ES2022のError.causeは特に注目しています。 従来だとtry catch節で囲むと階層化されたエラーを追跡するのが手間でした。 Error.causeを使うと、エラー発生時に発端のエラーまでログで追跡できます（以下はFirefoxのコンソールパネル）。 #JavaScript pic.twitter.com/eyFDFqyWNl
2022-06-13 10:49:38
拡大
パフォーマンスの最適化に役立つ機能
池田 泰延
@clockmaker
Chrome 102の新機能「Performance insights」パネル。 DOM content loadedやFCPのタイミングや、レイアウトシフトやレンダリングブロックの発見に役立ちます。 pic.twitter.com/5zyb6VAZQQ
2022-05-25 19:32:28
CSS: ダークモードの切り替えが楽に
池田 泰延
@clockmaker
Chrome 102がリリース。 DevToolsでライトテーマ・ダークテーマの切り替えUIが追加されました。 （従来より、この機能にアクセスしやすくなりました） #CSS pic.twitter.com/8ZMGxuJcrD
2022-05-25 19:28:20
CSS: アニメーションパネルが便利
池田 泰延
@clockmaker
ChromeのDevTools内［Animations］パネルを使うと、アニメーションのデバッグに役立ちます。 タイムラインが表示され、スロー再生や再生位置のスクラブができます。 CSS Transitions/Animations、Web Animations APIで実装したものが対象。 #CSS pic.twitter.com/tQaXAkN6ZZ
2022-05-15 10:27:36
記念すべきバージョン100
池田 泰延
@clockmaker
ついにGoogle Chrome 100がリリースされました🎉 DevToolsではイースターエッグとして祝うことができます。 pic.twitter.com/B73iX8V1L5
2022-03-30 07:58:05