Chrome开发者工具详解( 三 )
文章插图
向上的箭头是返回按钮，点击之后会退出当前正在执行的函数，到达函数执行完毕的在状态，如果是在全局作用域中，那么会退出调试 。最后一个按钮是激活和反激活所有的断点，如果当前的断点是激活的，点击之后所有的断点将不起作用，再次点击之后恢复作用 。
常用的快捷键如下：
F8：快捷键，执行到最后一步
ctrl+F8禁用断点
F10：逐语句执行，执行到下一步
F11：逐语句调试，即单步调试，会跳入方法、表达式，进行逐语句的跟踪调试
调试小技巧：1、直接修改页面元素
选择页面上元素，右键"检查"，会打开开发者工具窗口，显示当前选择元素的源代码，可以双击进行修改 。
如果要修改的东西比较多，可以折叠元素并单击选择，再右键Edit as HTML修改 。
2、颜色取色器
选择页面上元素，右键"检查"，会打开开发者工具窗口，在Styles窗口中，点击一个样式的color右边小方块（如没有color可自己输入如color:red），会弹出颜色拾取器，可以在上面颜色画板上选择一个颜色，也可以选择"笔"图标可以拾取页面上元素的颜色 。
3、快速查找并定位文件
查看源代码，鼠标移到开发工具窗口，按ctrl+p，输入链接地址的前几个字母，会自动联想显示所有符合条件的地址，点击打开即可 。（有时第一次打开是空白内容，可再点击一次链接）
打开之后，如果是js内容，就可以直接在上面打断点调试 。
推荐阅读
- 有哪些视频制作工具？免费视频剪辑软件排行
- Web漏洞扫描——AWVS漏扫工具的使用
- 推荐 10 款 Chrome 开发工具插件
- 16 个 PHP 开发者必知必会的魔术方法
- 网络互传辅助工具strsvr
- OSI模型是什么？简单几步制作可视化图形图表工具
- 华为内部远程工具——IPOP，了解一下
- 杀毒软件|微软Defender又翻车！Chrome更新被当做可疑活动
- 彩妆工具有哪些 化彩妆需要准备哪些工具
- 微信推出开发者版：基于Android版v7.0.18