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:目前不支持标准发布版本的 ...
随机推荐
- Chrome 最小化恢复之后部分黑屏
解决办法:设置->显示高级设置->关闭硬件加速
- Centos6系列安装nginx
设置ssh服务为开机启动 输入命令:chkconfig sshd on 即可.注:若是chkconfig sshd off则禁止SSH开机启动 设定账号为bizuser ,密码为123456 第一步: ...
- linux ssh文件输
在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件scp username@servername:/path/filename /var/www/local_dir(本地 ...
- android view、viewgroup 事件响应拦截处理机制
文章中会用到部分网络资源,首先将原作者的链接附上. 但是还是会附上数量较大的关于此部分内容的自己的思考. ----------------------------------------------- ...
- POJ 2688 Cleaning Robot
题意: 给你一个n*m的图.你从'o'点出发,只能走路(图中的'.')不能穿墙(图中的'x'),去捡垃圾(图中的' * ')问最少走多少步能捡完所有垃圾,如有垃圾捡不了,输出-1. 思路: 有两个思路 ...
- 自学Python四 爬虫基础知识储备
首先,推荐两个关于python爬虫不错的博客:Python爬虫入门教程专栏 和 Python爬虫学习系列教程 .写的都非常不错,我学习到了很多东西!在此,我就我看到的学到的进行总结一下! 爬虫就是 ...
- C# 多线程系列(三)
线程池 创建线程需要时间,如果有不同的小任务要完成,就可以事先创建许多线程,在应完成这些任务时发出请求.这个线程数最好在需要更多线程时增加,在需要释放资源时减少. 不需要自己创建这样的一个列表.该列表 ...
- Android中ImageView的属性
资源使用 Android 中支持三种格式的位图文件:.png(首选), .jpg(可接受),.gif(不建议) 为什么首推 PNG 呢? 官网的描述如下: 注:在构建过程中,可通过 aapt 工具自动 ...
- Unity引擎GUI之Input Field
InputField 文本输入组件,本文练习InputField的属性及事件 一.属性 1 Interactable: 是否禁用 Transition:过渡方式 Normal Color 正常的未有任 ...
- 八:前端---Vue下的国际化处理
1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将 ...