chrome 插件开发2
调试
这个指南会向您介绍如何使用Chromium的内建开发工具进行应用(扩展)调试。
查看应用(扩展)信息
1.加载Hello World应用(扩展)。如果这个应用(扩展)正在运行中,你将在浏览器右边的地址栏上看到Hello World的图标。
如果这个应用(扩展)并未运行,你可以找到应用(扩展)文件,并且加载它们。如果你没有应用(扩展)文件,可以在这里下载它的zip文件,然后按创建扩展范例的方法加载它。
2.前往扩展页,地址 chrome://extensions,确认这个页面在开发者模式下。
3.查看Hello World应用(扩展)的信息,你能看到应用(扩展)的名称、描述、应用(扩展)ID。
观察popup页面
1.前往扩展页,地址 chrome://extensions,确认这个页面在开发者模式下,扩展页并不需要被打开,只要浏览器记住了这个设置即可。
2.右键点击Hello World 图标 ,然后选择“审查弹出内容”菜单项,popup.html将会被显示在开发工具窗口中。
3.如果脚本按钮没有被选中了,点击它。
4.点击控制台按钮 ,(在开发者窗口的左下角,第二个按钮就是)这样你可以即看到代码,又看到控制台。
使用调试器
1.搜索”img.src”,然后在这个位置设置断点,只要在行号上单击即可设置。(比如:37行)。
2.确认你能看到popup.html标签,它将显示20个“hello world”图片。
3.在控制台上,重新加载这个页面。命令:location.reload(true);
> location.reload(true)
4.在工具窗口的右上方,你能看到局部变量。在这个例子中,它会显示出所有当前范围所见的变量。例如:在下面的屏幕截图上,变量i=0,photos则列出了一部分的Element列表。实际上,它包含了20个元素,每个代表一个图片。
5.点击play/pause按钮 (在开发者工具窗口的上右方)做一次图像处理循环,每次你点击这个按钮,i会加1,popup页面会显示更多另外的图标,当i是10的时候,popup页看起来像如下图所示:
6.点击play/pause按钮后面的的按钮,可以步进到函数调用的上层,为了让页面完成加载,点击之前的第37行,禁用之前设置的断点,接着按下play/pause按钮继续执行。
总结
这个指南示范了简单的应用(扩展)调试,总结一下:
1.在扩展管理页面上(chrome://extensions),找到应用(扩展)ID;
2.查看应用(扩展)中的文件,使用类似这样的格式访问 chrome-extension://extensionId/filename
3.使用开发者工具设置脚本断点,单步调试,查看变量
4.使用控制台命令 location.reload(true)来重新加载当前的调试页面
chrome 插件开发2的更多相关文章
- chrome插件开发-消息机制中的bug与解决方案
序言 最近开发chrome插件,涉及到消息传递机时按照教程去敲代码,结果总是不对.研究了大半天终于找到原因,现在记录下. 程序 插件程序参考官网 chrome官网之消息传递机制, 不能FQ的同事也可以 ...
- Chrome插件开发入门(二)——消息传递机制
Chrome插件开发入门(二)——消息传递机制 由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...
- vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
- Chrome插件开发,美化网页上的文件列表。chrome-extension,background
上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修 ...
- Chrome插件开发,美化网页上的文件列表。chrome-extension,content-scripts
趁着2018年还剩最后几天,发几篇博客,荒废太久了,惭愧. 最近也是需求驱动,研究了下Chrome插件开发.来看一下我们公司运维提供的日志查看页面 所有项目的日志都参杂在一起,每次去找都很痛苦.慢慢发 ...
- [Chrome插件开发]001.入门
Chrome插件开发入门 Chrome扩展文件 Browser Actions(扩展图标) Page Actions(地址栏图标) popup弹出窗口 Background Pages后台页面 实战讲 ...
- chrome插件开发学习(一)
两个不错的网址: 360chrome插件开发文档:http://open.chrome.360.cn/extension_dev/manifest.html 图灵 chrome插件开发于应用 电子书: ...
- [No000080]右键解锁增强Chrome插件开发,破除防复制
昨天用360极速(虽然我不喜欢360.)浏览器,登陆知乎查阅一些东西,突然感觉有些观点很赞同,想copy转载一下,我了个去,它丫的居然不让我复制. 地址:https://www.zhihu.com/q ...
- Chrome插件开发
参考文档: http://open.chrome.360.cn/extension_dev/overview.html 参考博文: http://www.cnblogs.com/mfryf/p/370 ...
- chrome 插件开发
写在开头: 相当有意思的UI界面,编码实现,浏览速度.对于一天浏览器使用超过10个小时的人来说,能够定制自己的浏览器,是相当的具有诱惑力. Getting Started 1:目前不支持标准发布版本的 ...
随机推荐
- 【IDEA】(4)---很好用的DEBUG功能
IDEA-DEBUG功能 一.常用快捷键 快捷键并不是完全一样的,我这边是MAC安装的IDEA, 这边最主要还是知道DEBUG时常用的功能. 1.快捷键 F7 #进入下一步,如果当前行是一个方法,则进 ...
- thinkphp3.2 验证码生成和点击刷新验证码
生成验证码的时候: public function verify_c(){ $Verify = new \Think\Verify(); $Verify->fontSize = 18; $Ver ...
- vue中的config配置
在webpack.base.conf文件中配置别名以及扩展名 resolve: { extensions: ['.js', '.vue', '.json', '.styl'], alias: { 'v ...
- ie9长度兼容
onchange="this.value=this.value.substring(0, 10)" onkeydown="this.value=this.value.su ...
- ArrayList<HashMap<String,Object>>集锦
1. Android中如何从一个Activity中ArrayList<HashMap<String,Object>>传递到另一个activity? eg: ...
- Android截图截取弹框AlertDialog
1:效果如图 2:权限 <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="21" ...
- Windows7 win10 系统如何强制禁用驱动程序签名
转载自奇兔 Win7 64位系统禁用驱动程序签名强制 Win7系统是比较稳定的一款系统,也是最多人在使用的一款系统.当我们在Win7系统中安装驱动程序的时候,对安装的驱动程序需要数字签名,否则驱 ...
- MYSQL 代码删除和添加表格列方法
一个表格建立后用代码删除或添加列: -- 删除列alter table teacher drop column create_time;-- 添加列alter table teacher add co ...
- dubbo之本地调用
本地调用 本地调用使用了 injvm 协议,是一个伪协议,它不开启端口,不发起远程调用,只在 JVM 内直接关联,但执行 Dubbo 的 Filter 链. 配置 定义 injvm 协议 <du ...
- 使用replace pioneer批量修改文件名
shell的正则表达式还是很难记忆的,也没有沉静的心情看文档,于是使用了replace pioneer. 1. 启动replace pioneer,Tools->batch runner , ...