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

Scroll Into View 滚动如视图内

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

操作:

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

  • 右击,选择Scrollintoview

Copy As Fetch 复制为 Fetch

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

操作:

  • Network 标签页中,选中一个请求

  • 右击,选择Copy -->Copyasfetch

     

阻塞请求

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

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

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

操作:

  • Elements 标签页中选中一个页面元素(选中之后,默认可以通过$0 变量获取到该元素 )

  • Console 标签页中,调用函数monitorEvents,输入两个参数,第一个是当前元素($0),第二个是事件名(click

  • Enter后,当被选中的元素触发了点击事件之后,Console 标签页会将该点击事件对象打印出来

拖动页面元素

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

操作:如下图。

DOM 断点调试

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

操作:

  • Elements 标签页,选中一个元素

  • 右击,选择 Breakon --> subtree modifications  (或attribute modifications 或node removal )

截屏

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

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

  • CMD + SHIFT + P ( windows 中用 CTRL + SHIFT + P ) 打开命令菜单

  • Elements 标签页,选中要截取的页面元素

  • 选择 Capture node screenshot

截取完整页面的操作

  • CMD + SHIFT + P (windows 中用 CTRL + SHIFT + P ) 打开命令菜单

  • 选择 Capture full size screenshot (不需要选择页面元素)

截取当前视图内的页面

  • CMD + SHIFT + P (windows 中用CTRL + SHIFT + P) 打开命令菜单

  • 选择 Capture screenshot (不需要选择页面元素)

缓存上一步操作的结果

ChromeDevTools 上运行JavaScript 表达式的时候,可以使用$_ 来获取到上一步操作的返回值。

Overrides 重写

ChromeDevTools上调试css 或JavaScript时,修改的属性值在重新刷新页面时,所有的修改都会被重置。如果你想把修改的值保存下来,刷新页面的时候不会被重置,那就看看下面这个特性(Overrides)吧。Overrides 默认是关闭的,需要手动开启,开启的步骤如下。

开启的操作:

  • 打开ChromeDevTools 的Sources 标签页

  • 选择Overrides 子标签

  • 选择+Selectfolderforoverrides,来为Overrides 设置一个保存重写属性的目录

小结

ChromeDevTools 中有很多调试的小技巧,如果细数的话,至少有几十种。本文限于篇幅,只是列出了一些不容易被发现,且还比较好用的技巧,希望能对你有帮助。

[No0000194]聊聊 Chrome DevTools 中你可能不知道的调试技巧的更多相关文章

  1. Spring中你可能不知道的事(一)

    Spring作为Java的王牌开源项目,相信大家都用过,但是可能大家仅仅用到了Spring最常用的功能,Spring实在是庞大了,很多功能可能一辈子都不会用到,今天我就罗列下Spring中你可能不知道 ...

  2. [iOS翻译]《iOS 7 Programming Pushing the Limits》系列:你可能不知道的Objective-C技巧

    简介: 如果你阅读这本书,你可能已经牢牢掌握iOS开发的基础,但这里有一些小特点和实践是许多开发者并不熟悉的,甚至有数年经验的开发者也是.在这一章里,你会学到一些很重要的开发技巧,但这仍远远不够,你还 ...

  3. 漫谈程序员(十一)老鸟程序员知道而新手不知道的小技巧之Web 前端篇

    老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方 ...

  4. 在 Chrome DevTools 中调试 JavaScript 入门

    第 1 步:重现错误 找到一系列可一致重现错误的操作始终是调试的第一步. 点击 Open Demo. 演示页面随即在新标签中打开. OPEN DEMO 在 Number 1 文本框中输入 5. 在 N ...

  5. JavaScript中你可能不知道的九件事

    今天凑巧去W3School扫了一遍JavaScript教程,发现从中看到了不少自己曾经没有注意过的细节. 我这些细节列在这里.分享给可能相同不知道的朋友: 1.使用 document.write() ...

  6. MySQL中你肯定不知道的int隐情

    MySQL中定义id字段为int类型,但是你知道它内部是什么玩意吗? 1.如果定义int类型,但是不声明长度,系统默认为11个长度(这个大家都知道): 2.如果指定长度小于11,实际上系统还是默认为1 ...

  7. idea开发工具中你可能不知道的却又比较好用的快捷键

    Alt+insert :生成代码 较为常用的是 1.普通Class中生成get set 方法 .生成构造函数.生成spring注入.重写对象的equal.toString.hashcode方法 2.如 ...

  8. Spring中你可能不知道的事(二)

    在上一节中,我介绍了Spring中极为重要的BeanPostProcessor BeanFactoryPostProcessor Import ImportSelector,还介绍了一些其他的零碎知识 ...

  9. 【译】Surface中你也许不知道的五件事

    Bring up the Quick Link Menu - Select the Windows Key + X or right click the Start Button to bring u ...

随机推荐

  1. SQL Server里如何处理死锁

    在今天的文章里,我想谈下SQL Server里如何处理死锁.当2个查询彼此等待时会发生死锁,没有一个查询可以继续它们的操作.首先我想给你大致讲下SQL Server如何处理死锁.最后我会展示下SQL ...

  2. [转]awsome-python

    原文链接 Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Pytho ...

  3. CentOS 6.5 x64下安装VMware tools

    [root@CentOS6 /]# mount /dev/cdrom /mnt mount: block device /dev/sr0 is write-protected, mounting re ...

  4. [MySQL Reference Manual]17 Group Replication

    17 Group Replication 17 Group Replication 17.1 Group Replication后台 17.1.1 Replication技术 17.1.1.1 主从复 ...

  5. vue2.0 技巧汇总

    /** * Created by */ export default { trim: (str) => { //删除左右两端的空格 return str.replace(/(^\s*)|(\s* ...

  6. go mod代理和小技巧

    代理 go mod的代理比较出名的有微软的athens,可以基于它搭建一个私有的代理,管理内部的私有代码,而且微软提供了一个公共的代理,我们可以直接使用 Linux export GOPROXY=&q ...

  7. NO.5   算法测试(词条统计)

     一.安装Eclipse 下载Eclipse,解压安装,例如安装到/usr/local,即/usr/local/eclipse 4.3.1版本下载地址:http://pan.baidu.com/s/1 ...

  8. Paxos 实现日志复制同步(Basic Paxos)

    Paxos 实现日志复制同步 本篇文章以 John Ousterhout(斯坦福大学教授) 和 Diego Ongaro(斯坦福大学获得博士学位,Raft算法发明人) 在 Youtube 上的讲解视频 ...

  9. Docker安装和使用(转)

    (转)原文地址:https://www.cnblogs.com/xiewenming/p/7903247.html 一,安装Docker 1.1 安装之前保持一个干净的Docker环境 sudo yu ...

  10. 第四百零六节,自定义用户表类来继承Django的用户表类,

    第四百零六节,自定义用户表类来继承Django的用户表类, models.py from django.db import models # Create your models here. from ...