HTML5\CSS3\JavaScript调试利器:Chrome DevTools

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

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

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

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

clip_image002  HTML5\CSS3\JavaScript调试利器:Chrome DevTools clip image002 thumb

面板 作用 常用功能列表 备注
Elements InspectingEditing 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: logwarningerrorassert, group infoInput: script function invoke, profiles, timestamp, debug command 特有的快捷键ESC

常用快捷键

面板 作用 快捷键
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/