javascript - Chrome 開発者ツール: 高度な機能を学習するための最適なリソース?

Question

AJAX と JavaScript のデバッグに Chrome 開発者ツールを何気なく使用しています。ほとんどの場合、コンソールで要素/変数/メソッドの状態をチェックし、「ネットワーク」タブで ajax を介してフィードされた問題をデバッグし、JS のバグを突き止められない場合はデバッガーでブレーク ポイントを確認することがあります。

しかし、専用のフロントエンド開発者 (私はバックエンドです) が私の前で同じツールを使用するときはいつでも、彼らはこれらの気の利いた抽象的な小さな機能を使用し、常に「くそー、なぜ私はそれについて知らなかったのか」と考えさせられます。 ?

...では、質問は次のとおりです。Google chrome devtools の完全で高度な説明を提供するリソースの提案はありますか?

Answer 1

Addy Osmani は、chrome dev ツールに関する優れたシリーズを作成しました。その一部は、こちら にあります。これを読んで (そしてビデオを見て) 非常に役立つと思います。いくつかの追加の有用なリソースを含めました。

Addy Osmani のチュートリアルとビデオ:

• Chrome 開発ツールを使用した簡単なメモリ プロファイリング
• css を視覚的に再設計して描画時間を短縮
• ブレークポイント - Chrome 開発ツール(Youtube ビデオ)
• The Breakpoint Ep2 (ポール アイリッシュとの Youtube ビデオ)
• The Breakpoint Ep3 (Youtube ビデオ、ソース マップ)
• TutsPlus による Chrome devtools コース(サブスクリプションが必要です)

公式：

• Google によるデベロッパー ツールの公式ガイド
• Googleによる開発者ツールに関する Google ビデオ チュートリアル
• Google によるJavaScript のプロファイリング

他の：

• Nettuts シリーズ、かなり基本的ですが、うまく配置されています。
• Paul Irish による開発ツールの再紹介
• Smashing Magazine にもプロファイリングに関する記事がありましたが、Addy Osmani のものと比べるとかなり基本的なものです。