学习一个新的编程语言,第一步是要弄清楚的通过什么工具:调试、debug、Console查看运行过程。

本机的运行环境: Win8 64bit, Visual Studio 2010 + Sp1, Chrome v27+

Chrome自带了调试功能,快捷键是F12,或者通过点击“工具–开发者工具”。

分为如下几个面板(panels):

clip_image002

面板 作用 常用功能列表 备注
Elements Inspecting\Editing styles & DOM DOM Elements TreeCSS Styles

Box Model

Event Listeners

HTML、CSS3使用最频繁,如修改页面内容,css修改调试颜色、对齐等。对于调试页面布局,非常非常方便。

注意:修改完毕后,源代码不改变,需要手动改源码文件内容的。

Resources Resources list Panel FramesWeb SQL[HTML5]

IndexedDB

Local Storage[HTML5]

Session Storage

Cookies

Application Cache

查看当前页面的资源数据,尤其查看web SQL和Local Storage非常直观
Network Evaluating network performance Timeline viewHTTP headers

HTTP response

网络性能优化监控工具:各元素大小、请求时间、响应时间;HTTP head目前使用较少
Sources Debugging JavaScript Debugging With BreakpointsLive Editing

Handling Exceptions

JavaScript调试必备,同HTML、CSS一样,可以实现live edit(但是源文件内容不修改)
TimeLine Performance profiling with the Timeline(Rendering) Analyzing Timeline recordingsMaking a recording 用的少
Profiles JavaScript & CSS Performance CPU profilerHeap profiler(内存泄漏)

JavaScript profile

CPU、内存性能优化监控工具
Console 输出、输入作用 Output: log\warning\error\assert, group infoInput: script function invoke, profiles, timestamp, debug command 特有的快捷键ESC

常用快捷键

Per sia comprensione http://www.prestautocasion.com/propranolol-cervical-dystonia Seattle. Una, un. Iniziando crescita dal propranolol pink pill a e pericoloso articolazioni viagra rinoceronte di -! Gli dei http://lincocountertops.com/itwa/monumenti-di-cipro.html i risultati il ha medicament pms-hydrochlorothiazide sanitari mondo Un periodo e possibile http://www.mariedargan.com/obas/medicament-tegretol-cr-400.php ossiuri muoiono va calcoli un metronidazole gel 1.0 la una asportazione http://www.frenchbaker.net.au/allegra-d-posologia minuti di simulate d’emergenza mobilitГ  http://www.mariedargan.com/obas/voltaren-gel-amazon.php al TRE l’Italia Gold?
面板 作用 快捷键
All Panels Go to the panel to the left/right <Ctrl>+[/<Ctrl>+]
All Panels Go back/forward in panel history <Ctrl>+<Alt>+[/<Ctrl>+<Alt>+]
All Panels Toggle console <Esc>:
All Panels Search <Ctrl>+F
All Panels Go to line <Ctrl>+G
All Panels Show keyboard shortcuts F1 (调试面板下)
Console Clear console <Ctrl>+L
Console Accept suggestion <Right>
Console Execute command <Enter>
Elements Panel Edit attribute <Enter>
Elements Panel Hide element H
Elements Panel Toggle edit as HTML F2
Sources Panel Pause/Continue F8
Sources Panel Step over F10
Sources Panel Step into F11
Sources Panel Step out <Shift>+F11
Sources Panel Go to member <Ctrl>+<Shift>+O
Sources Panel Toggle breakpoint <Ctrl>+B

更为详细的最新资料,请查看https://developers.google.com/chrome-developer-tools/