[油猴脚本开发指南]基础的网页调试(一)

李恒道 · 发表于 2021-12-4 00:49:15

前言

因为之前有人想让我写一篇基础的网页调试的方法

我也一直想跟大家聊一下

所以今天跟大家一起分享一下基本的网页调试的操作

断点以及搜索

在平时我们可以根据一些关键词来进行搜索，点击对应的行数就可以跳转到对应js文件中

图片.png

如果看到代码是压缩成一团的，点击格式化按钮即可看到稍微干净一点的js文件

但是因为已经被压缩过，所以大部分变量的名字都是无意义的

我们只能依靠人脑慢慢分析和整理

图片.png

格式化就可以看到

图片.png

干净以后

如果我们点击行数，就会有一个小蓝标

图片.png

当代码执行到这里的时候，就会停滞在我们点击的地方，这个叫做断点

附注

当出现在一个位置不停断下的时候，大部分不是我们想要的

这时候可以在行数右键写条件断点，写入相关的js表达式，只有满足条件的时候才会断下

操作区介绍

这个时候右侧就是我们的主要操作区

图片.png

遇到不停debugger的办法

在行数右键，选择一律不在此处暂停，但是这种方法不适用于频繁debugger，会造成严重的卡顿

这个时候也可以依次点击这两个按钮，忽略所有断点，但是这时候只能依赖我们肉眼进行调试了

图片.png

那么我们接下来来了解一下这些按钮的作用

图片.png

第一个按钮是执行，我们目前卡在断点这里，没有继续执行，如果点击则会继续运行代码

第二个按钮是执行函数调用

图片.png

比如我们现在停在这里，如果我们直接执行第二个，则立刻执行完函数并继续停再下一步

第三个按钮是进入到函数当中

当遇到函数时，会进入到函数内部

第四个按钮为执行到返回

即当点击该按钮，会在该函数执行完毕并返回的时候断下

第五个按钮为单步调试，即一行内有多个js表达式，单步调试一次只走一次计算，这个一般来说不会常使用

图片.png

最后这两个按钮

一个是忽略所有断点，这个时候遇到断点不会再下断

第二个是是否遇到异常时暂停，即当碰到js代码出现异常的时候是否停下，蓝色为启用

那么接下来我们看剩下的

监视

图片.png

大概监视则可以添加上我们想要监控的变量，点击刷新则可以更新看到当前的变量，注意这个是存在作用域限制的

如果要添加，点击右侧加号

会打开一个输入，可以在里面填写想要观察的变量名称

填写完毕后点击enter

添加后会显示变量的当前值，如果未设置或者无法找到

会显示not avaiable

只有断点逐步执行或你点击右侧刷新按钮的时候

才会更新变量值

断点

而断点则是显示了我们在哪里地方打了断点

单选可以取消或者选中

作用域

图片.png

作用域则显示了当前作用域的变量，闭包作用域的变量以及函数，全局的变量以及函数

闭包则是

function a(){
   b=6
  return ()=>{
  console.log(b)
  }
}

这种封闭内部的数据，禁止外部访问的情况叫做闭包

堆栈

图片.png

这里是调用堆栈，我们可以看到函数的调用流程

经常需要打出来相应的断点

然后一层一层的分析

Xhr断点

图片.png

xhr断点则是在触发xhr或者fetch的时候可以对其进行下断，不过一般我是不用这个功能的，我更喜欢在xhr看堆栈，然后追溯一些关键点的函数进行下断

Dom断点

图片.png

dom断点

我们在html元素上右键有设置中断的条件

如子树修改，属性修改，移出元素等等

这个时候一旦触发了响应的条件，就会在对应的js代码位置停下

事件断点

图片.png

事件断点即我们点击了对应的断点，就会在触发相应条件的情况下断下

CSP违规断点

图片.png

CSP违规断点资料相对较少

我也没有接触过，我查了一下

CSP即网站内容安全策略，允许限制网站中的行为以此提高安全性

如csp可以禁用内联脚本或eval

减少了跨站攻击脚本的可能性

而Trusted Types策略可以动态分析并防止网站出现注入攻击

这个不属于油猴的范畴内，就不多表述

关于这个也是属于我的知识盲区

说的越多错的越多

所以个人有兴趣可以查阅一下资料

结语

撒花~

Ne-21 · 发表于 2021-12-4 08:59:14

ggnb

BG2RHE · 发表于 2021-12-4 11:05:05

感谢老师！

李恒道 · 发表于 2021-12-4 12:10:56

BG2RHE 发表于 2021-12-4 11:05
感谢老师！

算不上什么老师
顶多算分享而已
这个论坛里比我强的人很多
搞这个系列文章
主要就是觉得自己当初学的实在太蛋疼了
好多东西感觉不整理出来可惜了
顶多算是一起进步
每次写文章都被一群大佬围着帮忙纠正错误
也进步了好多
哈哈哈
哥哥加油学！
期待哥哥写脚本

rubinTime · 发表于 2021-12-4 15:59:25

感谢哥哥

Hangover · 发表于 2021-12-4 21:01:43

ggnb！！！👍

李恒道 · 发表于 2021-12-4 21:51:14

Hangover 发表于 2021-12-4 21:01
ggnb！！！👍

呜呜呜
谢谢哥哥

王一之 · 发表于 2021-12-28 17:29:42

发现两个标题不一样

[油猴脚本开发指南]基础的脚本调试(二)
https://bbs.tampermonkey.net.cn/thread-1386-1-1.html
(出处: 油猴中文网)

李恒道 · 发表于 2021-12-28 17:38:09

王一之发表于 2021-12-28 17:29
发现两个标题不一样

[油猴脚本开发指南]基础的脚本调试(二)

是，这个我记得是三篇系列
大概讲解了脚本调试，网页调试以及介绍控制台和网络调试
然后一之哥回复：哥哥牛逼！
我：哥哥牛逼！

挖掘机小王子 · 发表于 2021-12-29 17:32:29

补充：CSP是限制你注入脚本的，如果你注入一个脚本，这个脚本发送请求，但是这个请求不是他网站允许的（他自己可以设置，服务器返回的时候，你可以看到响应头里面有设置的值，当然也可能是在网页中的meta标签中）具体可以看看抖音的CSP！