一些你可能不知道但是有用的 chrome 调试技巧

渗透技巧 4年前 (2021) admin
771 0 0

一些你可能不知道但是有用的 chrome 调试技巧

来源:seventhMa

https://juejin.cn/post/6963600839587921927

dom

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

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

一些你可能不知道但是有用的 chrome 调试技巧
添加选中dom节点为全局变量.png

force node state (触发)状态

调试dom的某个状态

一些你可能不知道但是有用的 chrome 调试技巧
force 节点 state (触发)状态.png

copy element

拷贝选中dom的信息

一些你可能不知道但是有用的 chrome 调试技巧
copy element.png

style/class

给选中元素添加一个 class 名

快速给元素添加class

一些你可能不知道但是有用的 chrome 调试技巧
给选中元素添加一个 class 名.png

修改元素的盒模型大小

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

一些你可能不知道但是有用的 chrome 调试技巧
快速修改元素的盒模型大小.png

network

block specific request

block特定的请求

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

一些你可能不知道但是有用的 chrome 调试技巧
block 指定的请求.png

改变请求的 user agent

修改请求的user agent

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

一些你可能不知道但是有用的 chrome 调试技巧
改变请求的 user agent.png

javascript

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

拦截浏览器的行为

一些你可能不知道但是有用的 chrome 调试技巧
断浏览器的行为(比如 click、mouse 等等).png

快速改变拦截的变量的值

双击改变拦截变量的值

一些你可能不知道但是有用的 chrome 调试技巧
双击改变拦截的变量的值.png

添加 watch 表达式

添加watch表达式

一些你可能不知道但是有用的 chrome 调试技巧
添加 watch 表达式.png

条件断点

设置断点的条件

一些你可能不知道但是有用的 chrome 调试技巧
条件断点.png

快速调试代码片段

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

一些你可能不知道但是有用的 chrome 调试技巧
片段代码调试.png

参考文档

  • Chrome DevTools




原文始发于微信公众号(前端达人):一些你可能不知道但是有用的 chrome 调试技巧

版权声明:admin 发表于 2021年6月8日 上午12:00。
转载请注明:一些你可能不知道但是有用的 chrome 调试技巧 | CTF导航

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...