[No0000194]聊聊 Chrome DevTools 中你可能不知道的调试技巧
对于前端开发者来说,
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 中你可能不知道的调试技巧的更多相关文章
- Spring中你可能不知道的事(一)
Spring作为Java的王牌开源项目,相信大家都用过,但是可能大家仅仅用到了Spring最常用的功能,Spring实在是庞大了,很多功能可能一辈子都不会用到,今天我就罗列下Spring中你可能不知道 ...
- [iOS翻译]《iOS 7 Programming Pushing the Limits》系列:你可能不知道的Objective-C技巧
简介: 如果你阅读这本书,你可能已经牢牢掌握iOS开发的基础,但这里有一些小特点和实践是许多开发者并不熟悉的,甚至有数年经验的开发者也是.在这一章里,你会学到一些很重要的开发技巧,但这仍远远不够,你还 ...
- 漫谈程序员(十一)老鸟程序员知道而新手不知道的小技巧之Web 前端篇
老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方 ...
- 在 Chrome DevTools 中调试 JavaScript 入门
第 1 步:重现错误 找到一系列可一致重现错误的操作始终是调试的第一步. 点击 Open Demo. 演示页面随即在新标签中打开. OPEN DEMO 在 Number 1 文本框中输入 5. 在 N ...
- JavaScript中你可能不知道的九件事
今天凑巧去W3School扫了一遍JavaScript教程,发现从中看到了不少自己曾经没有注意过的细节. 我这些细节列在这里.分享给可能相同不知道的朋友: 1.使用 document.write() ...
- MySQL中你肯定不知道的int隐情
MySQL中定义id字段为int类型,但是你知道它内部是什么玩意吗? 1.如果定义int类型,但是不声明长度,系统默认为11个长度(这个大家都知道): 2.如果指定长度小于11,实际上系统还是默认为1 ...
- idea开发工具中你可能不知道的却又比较好用的快捷键
Alt+insert :生成代码 较为常用的是 1.普通Class中生成get set 方法 .生成构造函数.生成spring注入.重写对象的equal.toString.hashcode方法 2.如 ...
- Spring中你可能不知道的事(二)
在上一节中,我介绍了Spring中极为重要的BeanPostProcessor BeanFactoryPostProcessor Import ImportSelector,还介绍了一些其他的零碎知识 ...
- 【译】Surface中你也许不知道的五件事
Bring up the Quick Link Menu - Select the Windows Key + X or right click the Start Button to bring u ...
随机推荐
- Effective Java 第三版——65. 接口优于反射
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- CountDownLatch、CyclicBarrier和Semaphore 使用示例及原理
备注:博客园的markDown格式支持的特别不友好.也欢迎查看我的csdn的此篇文章链接:CountDownLatch.CyclicBarrier和Semaphore 使用示例及原理 CountDow ...
- 如何让eclipse恢复默认布局
https://blog.csdn.net/howlaa/article/details/39178359 ********************************************** ...
- redis的事务不是原子性
Reference: https://blog.csdn.net/u011692780/article/details/81213010 一.事务的四大特性 关系型数据库的事务具有四个特性: 1. 原 ...
- MATLAB基础函数命令
1. 常用命令 dir:列出当前目录下的所有文件 clc:清除命令窗 clear all:清除环境(从内存中清除所有变量) who:将内存中的当前变量以简单形式列出 close all: 关闭所有的 ...
- 空的OnGUI也会有gc
一个空场景,添加如下代码: using System.Collections; using System.Collections.Generic; using UnityEngine; public ...
- vux安装中遇到的坑(转)
1.输入 npm install vux --save 2.输入 npm install vux-loader --save-dev(没安装的时候,会一直报错) 3.build/webpack.bas ...
- Android开发怎么让自己的APP UI漂亮、大方(配色篇二)
我们在没有效果图的app开发中有一件事情肯定很头疼:一个按钮的调色改过来改过去,还是很难看,最终只能暂时作罢,浪费了大量的开发时间和精力.开发规范篇见Android开发怎么让自己的APP UI漂亮.大 ...
- Kafka Eagle Consumers不显示
原因: kafka.eagle.offset.storage配置有误 该配置的作用:# kafka offset storage -- Offset stored in a Kafka cluster ...
- ubuntu 下无损扩展分区
命令扩展: http://www.cnblogs.com/greatfish/p/7347945.html http://www.cnblogs.com/wangxingggg/articles/68 ...