【旧版】Chrome Developer Tools入門

Google Chromeに内蔵されているデバッグ用ツールについて学んでいきます。
0%
このレッスンはもうすぐプレミアムレッスンとなります
2020年07月17日14時までは無料で学習できますが、それ以降はプレミアム会員限定となります。
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
#01 Chrome Developer Toolsとは何か?
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