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

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




方法一:控制台执行

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

浏览器运行JavaScript代码 浏览器怎么运行js_chrome devtools

优点

  • 操作和执行比较简单

缺点

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

权限

  • 能获取并编辑页面元素


方法二:标签执行

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

浏览器运行JavaScript代码 浏览器怎么运行js_chrome devtools_02


优点

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

缺点

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

权限

  • 能获取并编辑页面元素


方法三:开发者工具"代码片段"功能

chrome本身提供了“代码片段”功能,供开发者执行简单的代码。

操作:按F12 --> Sources --> Snippets ,写好代码后点击右下教“Ctrl+Enter”执行

浏览器运行JavaScript代码 浏览器怎么运行js_chrome devtools_03


优点

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

缺点

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

权限

  • 能获取并编辑页面元素


方法四:chrome自制插件执行

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

浏览器运行JavaScript代码 浏览器怎么运行js_chrome devtools_04

优点

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

缺点

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

权限

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


总结

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