学习一个新的编程语言，第一步是要弄清楚的通过什么工具：调试、debug、Console查看运行过程。
本机的运行环境： Win8 64bit， Visual Studio 2010 + Sp1， Chrome v27+
Chrome自带了调试功能，快捷键是F12，或者通过点击“工具–开发者工具”。
分为如下几个面板(panels)：
| 面板 | 作用 | 常用功能列表 | 备注 |
| 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/