Chrome 35 个开发者工具的小技巧

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点,例如使用consoledebugger在线编辑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) 输出数组数据

在 Canary 版本中,如果鼠标长时间悬停在某个选择器上,左侧的 Elements 面板会高亮显示匹配的 DOM 元素区域

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

在 Canary 版本中的 Timeline 面板新增了一个 Constly Functions 模块,用于记录四个方面的性能表现:Painting / Rendering / Scripting / Network activity

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

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

使用 animation 检查器可以检查运行中的 CSS 动画属性

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

时间: 2024-10-26 23:35:43

Chrome 35 个开发者工具的小技巧的相关文章

Chrome 35个开发者工具的小技巧

来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具.大多数可能熟悉关于chorme的许多特点,例如使用console和debugger在线编辑CSS.在这篇文章中,我们将分享一些很酷的技巧,让你能够更好的改进工作流程. 通过 console 面板修改页面元素

Chrome浏览器F12开发者工具使用教程博客汇总

CSDN 卜小娴 <Chrome开发者工具使用小技巧> CSDN csdnligao <chrome开发者工具的使用> CSDN 菜菜格子 <谷歌Chrome浏览器开发者工具教程-JS调试篇> CnBlogs 逆天妖精 <Chrome浏览器F12开发者工具简单使用> 原文地址:https://www.cnblogs.com/hyeTi/p/10337643.html

What&#39;s New In DevTools (Chrome 59)来看看最新Chrome 59的开发者工具又有哪些新功能

原文:https://developers.google.com/web/updates/2017/04/devtools-release-notes#command-menu 参考:https://developers.google.com/web/tools/chrome-devtools/ui#command-menu 1.css.js代码覆盖率:就是找到哪些未使用的css.js代码,这个对于使用模板的前端工作者进行前端优化很有帮助 命令行打开Coverage界面:command+shif

利用Chrome浏览器的开发者工具截取整个页面

①打开Chrome浏览器的开发者工具: 快捷键: command + Alt + I (Mac). Ctrl + shift + I (Windows) 或者: 鼠标右键 -> 弹出菜单中选择 "检查" 选项. ②打开命令行: 快捷键:command + shift + P (Mac).Ctrl + shift + P (Windows) ③输入命令:Capture full size screenshot 确定后,截图将会自动下载. 原文地址:https://www.cnblo

mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案

微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热潮即将到来, 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开小程序 开发工具后,只见一块白板赫然映入眼帘,不向你问好,不向你抱怨,它就是在那里静静地待着,就是迟迟看不到 传说中的二维码.系统是最新的macOS Sierra,也装了node.js之类的东西,想了一切可能的原因,网络.环境, Google了若干小时,最终甚至有些想放弃了.之前安装过低版本的破解版

chrome谷歌浏览器-DevTool开发者工具-详细总结

一.概述 1.官方文档 2.打开方法: 3.前言: 二.九个模块: 1.设备模式Device Mode 2.元素面板Elements 3.控制台面板Console 4.源代码面板Sources 5.网络面板Network 6.性能面板Performance  以前的版本叫Timeline 7.内存面板Memory  以前的版本叫分析面板 8.应用面板Application 以前版本叫资源面板 9.安全面板Security 三. 注 一.概述 1.官方文档 https://developers.g

【转】mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案

转自:https://www.cnblogs.com/stevenluo/p/6030445.html 微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热潮即将到来, 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开小程序 开发工具后,只见一块白板赫然映入眼帘,不向你问好,不向你抱怨,它就是在那里静静地待着,就是迟迟看不到 传说中的二维码.系统是最新的macOS Sierra,也装了node.js之类的东西,

Notepad工具使用小技巧

工欲善其事必先利其器 Notepad++是个很不错的文本编辑工具,掌握它的使用技巧可以提高我们工作的效率.见如下: 比较常用的罗列如下:(如果有更好的建议可以留言哈) 1: 添加书签 CTRL+F2 或者是 直接鼠标右击左侧栏2:快速定位书签 F23:快速复制一行 CTRL+D4:快速删除一行 CTRL+L5:快速定位到某一行        CTRL+G6: 快速查询 CTRL+F7: 进行单行注释 CTRL+K 或者是 CTRL+Q8:取消单行注释 CTRL+SHIFT+K 或者是 CTRL+

41个Web开发者JavaScript实用小技巧

1. 将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false" < table border oncontextmenu=return(false)>< td>no< /table> 可用于 Table 2. 取消选取.防止复制 < body onselectstart="return false"> 3.JS不允许粘贴 onpaste="return