油猴子从入门到喵喵喵喵(实例:9/9 完结)

【本文为付费内容,如您尚未付费请点此】

【返回目录】 | 【上一章 油猴子的基本格式】

如何调试脚本

校对完成,更新时间:2020-07-23 11:36:10

如果打算自己去书写脚本,就难免要对脚本进行调试。代码写出来,试一试它能不能按照我的预期去运行,如果不符合预期,那么看一看究竟是哪里出了差错,然后修正这个问题,让脚本回归预期。

最基本,最重要

最简单直接的方法就是把写出来的脚本安装进去,让它实际工作一下,看看效果如何。前面我们也已经讲到过了,无非就是直接在脚本编辑器里进行编辑;或者在外面编辑好,然后复制粘贴进去;再或者将本地文件安装到脚本管理器里,让它可以更加便捷地进行更新(同步更改)。

开发者工具

然后要用到的是浏览器的开发者工具,可以从浏览器的菜单打开,或者在页面上右键检查元素,再或者按快捷键 F12。

其中会有一个控制台的标签(Console),这里主要用来输出页面的各种运行信息,如果我们的脚本出错,那么它的报错信息应该也会出现在这里。

其中有一个禁止符,可以清空控制台当前的所有输出。如果在清空之后再触发脚本,那么可以更加容易阅读,避免其他干扰信息。

如果使用的是 Violentmonkey,那么脚本默认的插入模式是 page,就是和网页自身的脚本无异。所以这时候在控制台的过滤器里选择 top,就是查看最顶层的信息,就对了。如果是 Tampermonkey,或者以 content 方式插入,则在过滤器里选择对应的脚本管理器。

脚本出现问题产生的信息,一般在右侧的文件名处会是 脚本名称.user.js,也可能是 VM.js 或者什么类似的东西。因为环境的不同产生的效果可能也不一样,这种事情就灵活变通就好。反正大部分情况这些信息还是很容易分辨的。

这里我就不特别进行展开了,因为后面连贯的是一整套的前端知识和开发相关的技巧,一旦展开,那这篇内容就直接从中篇飙升为长篇,老鼠就真的要累趴趴了。

如果对这方面有兴趣建议去网络上搜索相关内容,或者深入阅读 MDN 的前端开发文档,或者谷歌的开发者工具文档( Chrome DevTools  |  Chrome for Developers )。又或者来阅读小老鼠写的前端教程( https://2019.dmnydn.com/ )。

断点

如果我们在代码中插入这样一行:

debugger

就为代码加入了一个断点,代码运行到这里会暂停并打开开发者工具显示对应的位置,这时候前面已经运行的代码上会标示出已有的量,方便查看程序是如何运作的。

片段

如果只是想测试代码中某一个细节,比如这一句代码是否可以准确的获取页面中某个元素的值。那么直接将这段代码复制到控制台中,回车运行,查看结果也是一个很不错的办法。

这里需要提示的就是在控制台中输入时,如果点击回车,就会将已输入的代码运行。想要对代码进行换行,则需要使用 Shift+Enter。

Code Runner

在 VS Code 编辑器里有一款叫做 Code Runner 的拓展,它可以在编辑器中直接运行 JavaScript,并查看效果。甚至需要测试的代码都无需保存,便可以直接运行。

当然这是在你的代码与页面内容无关的情况下,比如就做一个计算器,那么就和页面中的元素等无关,所以在编辑器中直接进行测试会方便一点。

或者只是用它来测试一些与页面无关的代码片段。

耐心

虽然这算不上工具,但真的是写脚本时非常重要的东西。

如果是书写一个页面,那么我们从零开始搭建,干扰的因素是很少的。但脚本却是在别人页面的基础上去进行修改,这就仿佛在尝试解开一个残局。其中会有很多制约,很多掣肘的地方,还有很多你可能没有想到的影响因素,就需要凭着耐心一点一点进行排查。


到这里我们算是对油猴脚本有了一定的了解。如果你本身有前端的基础,其实现在已经完全可以进行书写了。就算没有基础,凭着已经了解到的这些内容,再去看别人的代码,也能从中了解到很多信息。后面我们要进入到它的入门部分,了解它能够带来的便利,并尝试书写一些简单的小脚本。

【返回目录】 | 【下一章 油猴子的接口】

1 个赞