不常见但是有用的 Chrome 调试技巧

开发 前端
添加选中dom节点为全局变量方便需要调试多个dom的场景。

 dom

添加选中dom节点为全局变量方便需要调试多个dom的场景

适用对dom有多次操作的场景

添加选中dom节点为全局变量.png

force node state (触发)状态

调试dom的某个状态

force 节点 state (触发)状态.png

copy element

拷贝选中dom的信息

copy element.png

style/class

给选中元素添加一个 class 名

快速给元素添加class

给选中元素添加一个 class 名.png

修改元素的盒模型大小

快速修改元素的盒模型大小(margin/padding/width/height等)

快速修改元素的盒模型大小.png

network

block specific request

block特定的请求

快捷键:command + shift + p -> show request blocking

block 指定的请求.png

改变请求的 user agent

修改请求的user agent

快捷键:command + shift + p -> network conditions 切换 user agent

改变请求的 user agent.png

javascript

断点,断浏览器的行为(比如 click、mouse 等等)

拦截浏览器的行为

断浏览器的行为(比如 click、mouse 等等).png

快速改变拦截的变量的值

双击改变拦截变量的值

双击改变拦截的变量的值.png

添加 watch 表达式

添加watch表达式

添加 watch 表达式.png

条件断点

设置断点的条件

条件断点.png

快速调试代码片段

Snippet(片段)代码调试,不需要创建特定的页面

片段代码调试.png 

 

 

责任编辑:庞桂玉 来源: 前端大全
相关推荐

2016-12-14 19:19:19

Linuxgcc命令行

2016-12-14 20:53:04

Linuxgcc命令行

2021-10-21 22:03:00

PythonNumpy函数

2021-08-17 10:34:19

Python数据科学机器学习

2010-07-30 09:07:12

PHP函数

2023-02-03 08:43:52

2022-03-12 20:12:08

希尔排序数组插入排序

2022-07-29 09:01:20

Chrome试源代码调试技巧

2011-07-05 11:24:52

SQL语句索引

2023-04-27 07:41:21

Java开发技巧

2019-02-15 15:15:59

ChromeJavascriptHtml

2015-10-16 15:43:02

2020-10-27 09:52:39

5G无线网络运营商

2021-02-20 22:09:48

Web开发HTML

2021-07-02 10:20:15

HTML前端技巧

2009-12-24 15:41:54

shell组合控制键

2021-08-26 13:07:05

编程语言攻击恶意软件

2011-07-22 09:09:52

Oracle数据库SQL效率

2010-06-24 16:18:49

Linux Chatt

2021-06-29 10:50:30

Python函数文件
点赞
收藏

51CTO技术栈公众号