微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

Chorme 开发者工具的小技巧

2016-01-25 20:11 前端大全

(点击上方,可快速关注)

来源:w3cplus - 南北(@ping4god)

网址:http://www.w3cplus.com/tools/dev-tips.html


谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点,例如使用console和debugger在线编辑CSS。在这篇文章中,我们将分享一些很酷的技巧,让你能够更好的改进工作流程。



通过 console 面板修改页面元素及元素内容:


  • 获取元素节点

  • 右键选择 Edit as HTML 或者 Edit Text

  • 修改后的内容会实时反映在页面和 Elements 面板上



inspect() / copy() / values() 和 Ctrl + L


  • 在 console 面板使用 inspect(elem) 跳转到 elements 面板的指定元素节点

  • 在 console 面板使用 copy(values) 将数据复制到剪贴板

  • 在 console 面板使用 values(object) 获取对象的所有属性值,返回数组

  • 使用 Ctrl + L 清空当前的 console 面板



JS 文件打开和文件内的快速跳转


  • 在 Sources 面板使用 CMD + O 快捷键打开搜索框

  • 搜索框下会提示当前页面的涉及的 JS 文件,输入文件名即可打开

  • 如果输入 :5:9,则表示跳转到文件的第五行第九个字符



在 Sources 面板使用使用 Alt + - 和 Alt + = 可以在上一个鼠标位置和下一个鼠标位置之间跳转



在 Elements 面板使用 CMD + F 打开搜索框,除了常规字符串还可以使用选择器来选择 HTML 元素



在预览图片上右键选择 copy image as Data URI,可以将图片转换为 base64 编码



使用 CMD + Click 可以在文件中创建多个编辑点,使用 CMD + U 可以取消最后一处编辑点



按住 Alt 键然后选择文件内容,可以创建一个矩形选区



在 Network 面板的 filter 输入框输入 Is:running 指令可以查看正在进行中的网络请求



在 Elements 面板右侧的 Event Listeners 选项卡中,在绑定的事件上右键可以跳转到相应的 JS 代码上




有时候我们需要在以匿名模式打开链接,现在 Chrome 可以在你匿名打开的时候仍然保持同样的开发者工具状态,比如相同的工具栏位置、大小、面板布局、设置信息等等



在 Console 面板中使用 getEventListeners(node) 函数可以获取当前节点绑定的事件,返回一个数组



在 Elements 面板中,右键点击内联的 JS 或者 CSS 路径,选择 open 可以在 Sources 面板中打开相应的文件



数值调整快捷键


  • Up / Down,增加或减少 1 单位

  • Shift + Up / Down,增加或减少 10 单位

  • Alt + Up / Down,增加或减少 0.1 单位

  • 鼠标滚轮



使用 CMD + [ or ] 可以循环切换开发者工具的各个面板



为 JS 代码设置条件断点,该断点只在条件满足时触发



在 JS 文件中选中一段代码,通过 Ctrl + Shift + E 可以在 Console 面板中运行这段代码



将开发者工具从浏览器独立出来之后,使用 CMD + Alt + i 将创建另一个开发者工具,该工具可以用于修改第一个开发者工具的样式



使用 console.trace() 可以追踪代码执行过程中的栈信息



在 Timeline 面板中会有一些帧使用红色突出显示,这是因为这些帧值得引起开发者注意,它们的渲染时间通常超过了 18ms。点击这些红色的帧,即可查看相应的警告信息。通常认为每秒渲染 60 帧的页面是流畅的,这就要求每一帧的渲染不能超过 16ms。



在 Canary 版的开发者工具中,提供了一个隐藏的布局编辑器



在 Sources 面板中使用 CMD + Opt + F / Ctrl + Shift + F 可以搜索所有文件的信息



使用 Tab 键可以在 CSS 样式规则中进行遍历选定,选定的目标包括:选择器、属性和属性值。如果想跳回上一个目标,使用 Shift + Tab



使用 Up / Down 快捷键可以修改 DOM 元素属性中的数值。



调节 DOM 元素样式



在 Console 面板中提供了一系列的筛选器,用于过滤特定信息,比如 Handled 过滤器可以用来捕获 Promises 的 reject 状态



使用 console.time('sign string') 和 console.timeEnd('sign string') 获取中间的间隔时间



使用 console.table(arr) 输出数组数据



手动阻塞 URL 的加载,用于测试资源获取失败的页面效果




通过拖拽重排开发者工具上的面板顺序



Elements 面板跟随鼠标悬停目标显示不同的 DOM 元素




可视化资源依赖关系:绿色资源为初始化资源,红色资源由绿色资源引入


参考资料


  • 如何更专业的使用Chrome开发者工具

  • 15个你不得不知道的Chorme dev tools的小技巧

  • google devtools

  • dev tips



【今日微信公号推荐↓】

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 快来领钱啦!来晚了就没了! PHP7 的抽象语法树(AST)带来的变化 大学毕业前必需要做的12件事,不要给自己留下任何遗憾! iOS WIFI 信息 获取