3日前

ChromeのDevToolsの便利機能まとめ

ChromeやEdgeを中心とした開発者ツール(DevTools)の便利機能のツイートをまとめました。FirefoxやSafariの機能も紹介しています。
263
池田 泰延 @clockmaker

ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。

ics.media/entry/staff/ik…

池田 泰延 @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

コメント

みぐ(CERO A:全年齢対象) @miguse 3日前
便利機能のまとめってあまりないよねー
0
おねむ @onemu1846 2日前
広告あぶり出し機能すこ
1
Randy @kuppymichi 2日前
これすごい!めっちゃ使えるやん
0
八頭身派 颯仁|創造神🌄VTuber @komad333 2日前
表示されてるものなら大体は根っこが探し出せるんだよね…… 便利でよく使うよ。
0