登录 | 注册

 

调试

这个指南会向您介绍如何使用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的更多相关文章

  1. chrome插件开发-消息机制中的bug与解决方案

    序言 最近开发chrome插件,涉及到消息传递机时按照教程去敲代码,结果总是不对.研究了大半天终于找到原因,现在记录下. 程序 插件程序参考官网 chrome官网之消息传递机制, 不能FQ的同事也可以 ...

  2. Chrome插件开发入门(二)——消息传递机制

    Chrome插件开发入门(二)——消息传递机制   由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...

  3. vue.js 初体验— Chrome 插件开发实录

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...

  4. Chrome插件开发,美化网页上的文件列表。chrome-extension,background

    上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修 ...

  5. Chrome插件开发,美化网页上的文件列表。chrome-extension,content-scripts

    趁着2018年还剩最后几天,发几篇博客,荒废太久了,惭愧. 最近也是需求驱动,研究了下Chrome插件开发.来看一下我们公司运维提供的日志查看页面 所有项目的日志都参杂在一起,每次去找都很痛苦.慢慢发 ...

  6. [Chrome插件开发]001.入门

    Chrome插件开发入门 Chrome扩展文件 Browser Actions(扩展图标) Page Actions(地址栏图标) popup弹出窗口 Background Pages后台页面 实战讲 ...

  7. chrome插件开发学习(一)

    两个不错的网址: 360chrome插件开发文档:http://open.chrome.360.cn/extension_dev/manifest.html 图灵 chrome插件开发于应用 电子书: ...

  8. [No000080]右键解锁增强Chrome插件开发,破除防复制

    昨天用360极速(虽然我不喜欢360.)浏览器,登陆知乎查阅一些东西,突然感觉有些观点很赞同,想copy转载一下,我了个去,它丫的居然不让我复制. 地址:https://www.zhihu.com/q ...

  9. Chrome插件开发

    参考文档: http://open.chrome.360.cn/extension_dev/overview.html 参考博文: http://www.cnblogs.com/mfryf/p/370 ...

  10. chrome 插件开发

    写在开头: 相当有意思的UI界面,编码实现,浏览速度.对于一天浏览器使用超过10个小时的人来说,能够定制自己的浏览器,是相当的具有诱惑力. Getting Started 1:目前不支持标准发布版本的 ...

随机推荐

  1. Chrome 最小化恢复之后部分黑屏

    解决办法:设置->显示高级设置->关闭硬件加速

  2. Centos6系列安装nginx

    设置ssh服务为开机启动 输入命令:chkconfig sshd on 即可.注:若是chkconfig sshd off则禁止SSH开机启动 设定账号为bizuser ,密码为123456 第一步: ...

  3. linux ssh文件输

    在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件scp username@servername:/path/filename /var/www/local_dir(本地 ...

  4. android view、viewgroup 事件响应拦截处理机制

    文章中会用到部分网络资源,首先将原作者的链接附上. 但是还是会附上数量较大的关于此部分内容的自己的思考. ----------------------------------------------- ...

  5. POJ 2688 Cleaning Robot

    题意: 给你一个n*m的图.你从'o'点出发,只能走路(图中的'.')不能穿墙(图中的'x'),去捡垃圾(图中的' * ')问最少走多少步能捡完所有垃圾,如有垃圾捡不了,输出-1. 思路: 有两个思路 ...

  6. 自学Python四 爬虫基础知识储备

    首先,推荐两个关于python爬虫不错的博客:Python爬虫入门教程专栏   和 Python爬虫学习系列教程 .写的都非常不错,我学习到了很多东西!在此,我就我看到的学到的进行总结一下! 爬虫就是 ...

  7. C# 多线程系列(三)

    线程池 创建线程需要时间,如果有不同的小任务要完成,就可以事先创建许多线程,在应完成这些任务时发出请求.这个线程数最好在需要更多线程时增加,在需要释放资源时减少. 不需要自己创建这样的一个列表.该列表 ...

  8. Android中ImageView的属性

    资源使用 Android 中支持三种格式的位图文件:.png(首选), .jpg(可接受),.gif(不建议) 为什么首推 PNG 呢? 官网的描述如下: 注:在构建过程中,可通过 aapt 工具自动 ...

  9. Unity引擎GUI之Input Field

    InputField 文本输入组件,本文练习InputField的属性及事件 一.属性 1 Interactable: 是否禁用 Transition:过渡方式 Normal Color 正常的未有任 ...

  10. 八:前端---Vue下的国际化处理

    1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将 ...