chrome执行js脚本的4种方法及优缺点分析

chrome执行js脚本的4种方法及优缺点分析

• 方法一：控制台执行
• 方法二：标签执行
• 方法三：开发者工具'代码片段'功能
• 方法四：chrome自制插件执行
• 总结

---

方法一：控制台执行

最常用的执行方式，按F12 --> Console --> 写代码 --> 回车 即可

优点

• 操作和执行比较简单

缺点

• 写代码不方便，shift+enter 才是换行
• 不能指定保存（按上箭头会读取上一次编写的代码，但还是麻烦）

权限

• 能获取并编辑页面元素

---

方法二：标签执行

新建或修改标签，然后在网址上输入代码，javascript: 后面是具体执行代码。
执行的时候点击该标签即可。

优点

• 操作和执行都很简单
• 方便分享代码
• 能存储指定代码，方便执行

缺点

• 代码维护麻烦，只能执行不断行代码
• 调试麻烦

权限

• 能获取并编辑页面元素

---

方法三：开发者工具'代码片段'功能

chrome本身提供了“代码片段”功能，供开发者执行简单的代码。
操作：按F12 --> Sources --> Snippets ，写好代码后点击右下教“Ctrl+Enter”执行

优点

• 代码维护较方便
• 能保存多个脚本
• 调试方便

缺点

• 操作和执行都比较麻烦
• 只能执行一个片段脚本
• 执行响应较慢

权限

• 能获取并编辑页面元素

---

方法四：chrome自制插件执行

具体方法可以看我之前的文章： chrome自制插件–简单一键登录（附插件开发介绍）

优点

• 代码维护方便
• 能以项目形式开发功能，实现各种牛*操作
• 调试方便

缺点

• 需要一定的学习成本
• chrome本身的安全机制，自制插件基本只能以“开发模式”加载，共享麻烦

权限

• 能获取并编辑页面元素，各种你想不到的强大功能

---

总结

如果只是本人临时调试可以使用方法一和三，如果把代码分享给其他人方便使用可以使用方法二和四