俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

【译】Chrome浏览器开发者工具的13个有趣技巧——希望你已经掌握

聊聊 Chrome DevTools 中你可能不知道的调试技巧

2018/08/16 · 基础技术 · 调试

原文出处: 前端微志   

对于前端开发者来说,ChromeDevTools 绝对是不可或缺的调试工具,我们常用的调试方法包含一些console等,而ChromeDevTools 其实很强大,下面来聊聊一些你可能不知道的debug 方法。

欢迎光临我的博客拓跋的前端客栈原文地址了解一哈。如果您发现我文章中存在错误,请尽情向我吐槽,大家一起学习一起进步φ(>ω<*)

Scroll Into View 滚动如视图内

Elements 标签中,查看页面元素的时候,如果当前这个元素不在视图内,可以通过这个方法让这个元素快速滚入视图中。

操作:

  • Elements 标签页中选择一个不在视图内的元素
  • 右击,选择Scrollintoview

图片 1


Copy As Fetch 复制为 Fetch

Network 标签下的所有的请求,都可以复制为一个完整的Fetch 请求的代码。

操作:

  • Network 标签页中,选中一个请求
  • 右击,选择Copy –>Copyasfetch

图片 2

Chrome浏览器提供了一套非常出色的开发者工具来帮助您在Web平台上开发。下面我将介绍13个有趣的技巧,掌握他们对你只有好处。

阻塞请求

Network 标签页下,选中一个请求,右击该请求,选择Blockrequest domain 或Blockrequest URL,可以分别阻塞该请求所在domain 下的所有请求 和 该请求。

图片 3

1. 在Elements面板中拖放元素


在Elements面板中,你可以拖放任意的HTML元素,并在整个页面中更改其位置:

图片 4

1.gif

手动给元素添加一个点击事件监听

debug 的时候,有时候需要在元素的点击事件监听函数中,将该点击事件对象打印出来。有个更方便的方式,是可以直接在Elements 标签页为页面元素添加事件监听事件。

操作:

  • Elements 标签页中选中一个页面元素(选中之后,默认可以通过$0 变量获取到该元素 )
  • Console 标签页中,调用函数monitorEvents,输入两个参数,第一个是当前元素($0),第二个是事件名(click
  • Enter后,当被选中的元素触发了点击事件之后,Console 标签页会将该点击事件对象打印出来

图片 5

2. 在控制台中引用当前选定的元素


在Elements面板中,选择一个节点,然后输入$0控制台以引用它:

图片 6

2.gif

拖动页面元素

Elements 标签页,你可以拖动任何HTML 元素,改变它在页面中的位置。

操作:如下图。

图片 7

3. 使用控制台中最后一个操作的值


使用$_引用在控制台执行的前一操作的返回值:

图片 8

3.gif

DOM 断点调试

基本上大家都会用JavaScript 的断点调试,但是应该很多人不知道DOM 节点也可以进行断点调试。ChromeDevTools提供了三种针对DOM 元素的断点调试:子元素改变时属性改变时 和元素被移除时

操作:

  • Elements 标签页,选中一个元素
  • 右击,选择 Breakon –> subtree modifications  (或attribute modifications 或node removal )

图片 9

4. 添加CSS并编辑元素状态


在Elements面板中有2个超级有用的按钮。

第一个可以为你的选择器(selector)增加新的CSS属性:

图片 10

4.gif

第二个可以为你触发选定元素的状态,这样你就可以看到当它处于活动状态(active),悬停状态(hovered),焦点状态(focus)等等时应用的样式:

图片 11

4.2.png

截屏

在新版本的Chrome 中,提供了一个截图的API,你可以将整个页面截图或者截取部分页面元素,且截取的图片尺寸跟浏览器当前视图中要截取的内容所占尺寸一致。截图输出的是png 格式的图片,会自动通过浏览器下载到默认的目录下。现在有三种截取的方式:截取整个页面部分元素 或当前视图

5. 将修改后的CSS保存到文件


点击你编辑的CSS文件的名称,进入到Sources面板,你会发现你的修改已经在里面了。然后你可以对你实时的编辑进行保存。

这个修改不适用于添加的新选择器,也不适用于element.style属性,仅仅适用于原有选择器。

图片 12

5.gif

截取页面部分元素的操作:

  • CMD + SHIFT + P ( windows 中用 CTRL + SHIFT + P ) 打开命令菜单
  • Elements 标签页,选中要截取的页面元素
  • 选择 Capture node screenshot

图片 13

6. 截图单个元素


选择一个元素,MAC下按cmd+shift+p、windows下按ctrl+shift+p来打开命令菜单,然后输入Capture node screenshot

图片 14

6.gif

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:【译】Chrome浏览器开发者工具的13个有趣技巧——希望你已经掌握

您可能还会对下面的文章感兴趣: