学习一个新的编程语言，第一步是要弄清楚的通过什么工具：调试、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/
最新文章
算力为王时代: CPU --> GPU
GPU这...公元2024年，比2023年的AI风暴，更加寒噤。
2024年 甲辰龙年春节假期，我看了2本小说，茅盾文学...
后疫情时代，刚褪去口罩。又迎来经济消费降级，我的客户同...
热门文章
对程序员而言，写的代码用源码管理系统管理起来，非常方便...
百度搜索，输入西安城墙马拉松，有7万2千个结果。 实际...
2023年，三年疫情过后第一个春天，我开始了骑行: 空...
在VR应用中,有一个相对简单的虚拟现实体验,那...
相关【技术杂谈】文章
查看所有相关【技术杂谈】文章
上文中，说明了 Squid3 IP Proxy 隐藏原IP，这里就搭建Squid 3密码账号IP代理进行整理，涉及...
不用插件，js脚本显示星号密码
以前，我是用Chrome插件做这个这的--显示星号密码的。 今天，分享一个不用插件...
今天新采购了柒比贰WordPress主题，安装主题时候报错: MySQL命令行使用sql语句进行建表时，MySQL...