× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】Chrome Developer Tools入門 (全12回)

最新版のレッスンはこちらから » 【最新版】Chrome Developer Tools入門 (全10回)

Google Chromeに内蔵されているデバッグ用ツールについて学んでいきます。

このレッスンでは Google Chrome 19.0 を使用しています。

#01 Chrome Developer Toolsとは何か?
2012年8月16日
裏技的なコマンドなどをまとめた以下のサイトも参考にしてみてください。
http://www.ideaxidea.com/archives/2012/08/chrome_dev_tools.html
2012年6月13日
Chrome Developer Toolsの公式サイトは以下のとおりです。
・Chrome Developer Tools — Google Developers
https://developers.google.com/chrome-developer-tools/
#02 まずは起動してみよう
2012年6月13日
なお、Chrome Developer Tools自体もHTML/CSS/JavaScriptで作られています。Chrome Developer Toolsを起動し、左下のアイコンでウィンドウを切り離した後、起動するためのショートカットキー(MacだとCommand+Option+i)を押すと、Chrome Developer ToolsのChrome Developer Toolsが立ち上がり(ややこしいですが)、そのDOMなどを見ることができます。
#07 JavaScriptのデバッグをしてみよう (1)
2012年8月15日
Sourcesタブでは次のショートカットが使えます。
Cmd+L:行番号でジャンプ
Cmd+O:ファイルの一覧を表示
Cmd+Shift+O:関数やセレクタの一覧を表示
#09 ブラウザのパフォーマンスを調査しよう
2012年8月15日
なお、TimelineパネルではEventsなどで右クリックするとデータの保存、読み込みができます。他の人のデータを読み込んで解析する、といった使い方が可能です。
#10 Consoleパネルを使ってみよう
2012年8月15日
コンソールをクリアするには下のアイコン(マルに線が入ったもの)の他に、CTRL+Lが使えます。
#12 Ajaxのデバッグをしてみよう
2012年6月13日
なお、ここで紹介したプログラムは「jQueryの基礎」にて詳しく解説されています。
・#20 Ajaxで動的にページを更新する (1)
http://dotinstall.com/lessons/basic_jquery/520