ChromeのDevToolsの便利機能まとめ

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

POST時のリクエスト引数がわかりやすくなった

池田 泰延 @clockmaker

Google Chrome 96のDevToolsで、POST通信のリクエストペイロードが簡単に表示できるようになりました。 非同期通信をJavaScriptで開発するフロントエンドエンジニアには嬉しい機能改善ですね。 ※以前はヘッダータブの最下部だったので、辿り着くまで面倒だった pic.twitter.com/MUUGg45cKB

2021-11-17 08:55:01
拡大

日本語に対応

池田 泰延 @clockmaker

Chrome 94では、DevTools(デベロッパーツール)が日本語でも利用できるようになりました。 英語の苦手な方には、嬉しいアップデートでしょう。 pic.twitter.com/U6NAvREtWn

2021-09-24 20:29:58
拡大
拡大
池田 泰延 @clockmaker

ウェブ制作者に質問。 Chromeのデベロッパーツールは、英語と日本語のどちらで利用していますか? ※Twitterのアンケート機能で回答ください

2022-03-11 13:32:54

CSSの色やフォントをまとめてチェック

池田 泰延 @clockmaker

Chrome 96の新規能「CSSの概要(英: CSS Overview)」を使うと、サイト内の色やフォントを一覧表示できます。 フォントサイズや行間のバラツキ、配色、コントラスト比、メディアクエリーの列挙ができます。 CSS指定の甘さがあらわになるので、CSSコードの品質向上に役立つでしょう(自戒 pic.twitter.com/XEefJmpspY

2021-11-17 09:05:59
拡大

読み込みの優先度もわかる

池田 泰延 @clockmaker

imgタグでloading="lazy"を付けないほうが、読み込みの優先度が高くなります。 Chrome DevToolsの[ネットワーク]タブで、[Priority]列を表示すると確認できます。 pic.twitter.com/UpVdV8HjDf

2021-08-23 20:54:42
拡大
池田 泰延 @clockmaker

Chrome 92がリリース。 地味に嬉しいDevToolsの改善。 ■DevToolsの新機能 ・CSS Gridのエディターの追加コンソールでconst再宣言が可能に ・ネットワークタブのXHRがFetch/XHRに名称変更 ・ユーザーエージェントをJSで参照すると、Issuesタブで挙がる(非推奨のため) pic.twitter.com/QOC5SiULCk

2021-07-22 17:10:16
拡大
拡大

JavaScriptの負荷分析に

池田 泰延 @clockmaker

Lighthouse 8の新機能。JavaScriptの分析ができるようになっています。 JSファイルの容量大小を可視化したり、カバレッジ(使用していないコードの割合)を調べられます。 PageSpeed InsightsやChrome Canaryから利用できます。 pic.twitter.com/2KXCylwRc7

2021-06-04 09:25:39
拡大

ウェブアクセシビリティーの情報

池田 泰延 @clockmaker

Chromeに搭載予定のアクセシビリティの機能が便利。 開発者ツールで要素を調べるだけで、アクセシビリティの情報を確認できます。 ・読み上げ文字情報 ・role属性 ・キーボードフォーカス受付可否 今後、WAI-ARIA等の適用状態を調べるのに重宝しそうです。 ※今はChrome Canaryで試せます pic.twitter.com/5KUomeNiS5

2020-05-01 00:08:56
拡大

JSの値を監視できる

池田 泰延 @clockmaker

Google ChromeのDevToolsの豆知識。 ログポイントを使うと、好きな場所にconsole.log()相当のコードを差し込めます。変数の値を確認するのに便利。 ウェブサイトの本番公開時にconsole.logを消すのは当たり前ですが、ログポイントは公開後の動作確認に役立ちます。 pic.twitter.com/vjqA7bBnNI

2019-05-20 09:17:55
池田 泰延 @clockmaker

JavaScript中級・上級者向けのChrome DevToolsの便利機能もまとめてます。 ライブエクスプレッションだと、常に変数の値を監視できますics.media/entry/190517/ #JavaScript pic.twitter.com/rcXaXP6t54

2019-05-17 23:03:16
リンク ICS MEDIA ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 593 users 305

FCP等の検知

池田 泰延 @clockmaker

Google Chrome 72以降のDev Toolsでウェブページのタイミングを検知できるようになったのですね。パフォーマンス改善屋としては有用な機能。 マークの意味は次の通り。 ・FCP: First Contentful Paint ・FMP: First Meaningful Paint ・DCL: DOMContentLoaded Event ・L: OnLoad Event pic.twitter.com/Cvw3dl8WeY

2019-03-27 08:10:09
拡大

Canvasの分析に

池田 泰延 @clockmaker

WebGLの負荷の調査方法 ・ブラウザの[パフォーマンス]タブで関数の実行時間を調べる ・Chromeの[その他のツール]→[タスクマネージャー]でタブ単位のGPUメモリ使用量を調べる ・OSのアクティビティモニタでGPU使用率を調べる ・拡張機能Spector.jsで描画命令を調べる chrome.google.com/webstore/detai…

2022-10-12 21:24:47
池田 泰延 @clockmaker

@__sakito__ ChromeのDeveloper Toolsで見る方法はおそらくないのですが、次のツールが役立つと思います! ・Context2D : SafariのWebインスペクタの[グラフィックス]タブ(1枚目) ・WebGL : Chrome拡張機能のSpector.js (2枚目) ※CanvasはWebGLとContext2Dの2種類があるので、使い分けています。 pic.twitter.com/wlItHfMXsh

2021-05-29 23:59:31
拡大
拡大

iOS Safariにもデバッグ機能がある

池田 泰延 @clockmaker

iOS 15 Safariで利用可能になった機能拡張「Web Inspector」がとても便利。 開発者ツール的なことが、iOS Safari単体で利用できますpic.twitter.com/5sbBrJQ1vt

2021-09-21 09:36:58
拡大