ChromeのDevToolsの便利機能まとめ
- clockmaker
- 27876
- 85
- 333
- 85
POST時のリクエスト引数がわかりやすくなった
Google Chrome 96のDevToolsで、POST通信のリクエストペイロードが簡単に表示できるようになりました。 非同期通信をJavaScriptで開発するフロントエンドエンジニアには嬉しい機能改善ですね。 ※以前はヘッダータブの最下部だったので、辿り着くまで面倒だった pic.twitter.com/MUUGg45cKB
2021-11-17 08:55:01日本語に対応
Chrome 94では、DevTools(デベロッパーツール)が日本語でも利用できるようになりました。 英語の苦手な方には、嬉しいアップデートでしょう。 pic.twitter.com/U6NAvREtWn
2021-09-24 20:29:58ウェブ制作者に質問。 Chromeのデベロッパーツールは、英語と日本語のどちらで利用していますか? ※Twitterのアンケート機能で回答ください
2022-03-11 13:32:54CSSの色やフォントをまとめてチェック
Chrome 96の新規能「CSSの概要(英: CSS Overview)」を使うと、サイト内の色やフォントを一覧表示できます。 フォントサイズや行間のバラツキ、配色、コントラスト比、メディアクエリーの列挙ができます。 CSS指定の甘さがあらわになるので、CSSコードの品質向上に役立つでしょう(自戒 pic.twitter.com/XEefJmpspY
2021-11-17 09:05:59読み込みの優先度もわかる
imgタグでloading="lazy"を付けないほうが、読み込みの優先度が高くなります。 Chrome DevToolsの[ネットワーク]タブで、[Priority]列を表示すると確認できます。 pic.twitter.com/UpVdV8HjDf
2021-08-23 20:54:42Chrome 92がリリース。 地味に嬉しいDevToolsの改善。 ■DevToolsの新機能 ・CSS Gridのエディターの追加 ・コンソールでconst再宣言が可能に ・ネットワークタブのXHRがFetch/XHRに名称変更 ・ユーザーエージェントをJSで参照すると、Issuesタブで挙がる(非推奨のため) pic.twitter.com/QOC5SiULCk
2021-07-22 17:10:16JavaScriptの負荷分析に
Lighthouse 8の新機能。JavaScriptの分析ができるようになっています。 JSファイルの容量大小を可視化したり、カバレッジ(使用していないコードの割合)を調べられます。 PageSpeed InsightsやChrome Canaryから利用できます。 pic.twitter.com/2KXCylwRc7
2021-06-04 09:25:39ウェブアクセシビリティーの情報
Chromeに搭載予定のアクセシビリティの機能が便利。 開発者ツールで要素を調べるだけで、アクセシビリティの情報を確認できます。 ・読み上げ文字情報 ・role属性 ・キーボードフォーカス受付可否 今後、WAI-ARIA等の適用状態を調べるのに重宝しそうです。 ※今はChrome Canaryで試せます pic.twitter.com/5KUomeNiS5
2020-05-01 00:08:56JSの値を監視できる
Google ChromeのDevToolsの豆知識。 ログポイントを使うと、好きな場所にconsole.log()相当のコードを差し込めます。変数の値を確認するのに便利。 ウェブサイトの本番公開時にconsole.logを消すのは当たり前ですが、ログポイントは公開後の動作確認に役立ちます。 pic.twitter.com/vjqA7bBnNI
2019-05-20 09:17:55JavaScript中級・上級者向けのChrome DevToolsの便利機能もまとめてます。 ライブエクスプレッションだと、常に変数の値を監視できます。 ics.media/entry/190517/ #JavaScript pic.twitter.com/rcXaXP6t54
2019-05-17 23:03:16FCP等の検知
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:09Canvasの分析に
WebGLの負荷の調査方法 ・ブラウザの[パフォーマンス]タブで関数の実行時間を調べる ・Chromeの[その他のツール]→[タスクマネージャー]でタブ単位のGPUメモリ使用量を調べる ・OSのアクティビティモニタでGPU使用率を調べる ・拡張機能Spector.jsで描画命令を調べる chrome.google.com/webstore/detai…
2022-10-12 21:24:47@__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:31iOS Safariにもデバッグ機能がある
iOS 15 Safariで利用可能になった機能拡張「Web Inspector」がとても便利。 開発者ツール的なことが、iOS Safari単体で利用できます。 pic.twitter.com/5sbBrJQ1vt
2021-09-21 09:36:58