Chrome浏览器扩展开发系列之二:Google Chrome浏览器扩展的调试
1) 查看扩展程序的详细信息和ID
通过Chrome 浏览器的“ 工具->更多工具->扩展程序”,打开chrome://extensions页面,选中右上角的“开发者模式”,可以查看扩展程序的详细信息(如名称、概述、占用空间大小、版本和权限等)和ID。
2) 查看扩展程序的popup页面
通过Chrome 浏览器的“工具 ->更多工具->扩展程序”,打开chrome://extensions页面,选中右上角的“开发者模式”(必须在开发者模式下才能够看到调试菜单项),这时右键单击地址栏右侧的扩展程序图标,选择“审查弹出内容Inspect popup”,将会打开Developer Tools窗口,其中可以查看或跟踪popup.html页面的所有相关资源,包括js、DOM和CSS,如下图所示。同时显示出popup.html页面。
在Developer Tools窗口中,调试常用的有Elements、Sources和Console面板。
通过Elements面板,可以对照显示的页面查看页面的组成元素。
通过Sources面板,可以打开所有涉及的js文件,并设置断点,还可以Watch相关的js表达式。跟踪调试过程中,F11键可以单步调试,Shift+F11键可以跳过当前运行的函数,F8键可以恢复运行。
通过Console面板,可以查看JavaScript代码(如console.log(), console.error()等)运行的输出结果,类似于Windows命令行窗口。
注意:在此面板中输入location.reload(true),可以重新加载popup页面,从而对popup页面的初始化过程进行跟踪。
3) 查看扩展程序的options页面
扩展程序的options页面的过程与popup页面类似,区别仅在于打开Developer Tools窗口的方式。
通过Chrome 浏览器的“ 工具->更多工具->扩展程序”,打开chrome://extensions页面,对于要查看的扩展程序,单击“选项options”弹出options页面,在options页面中右键单击并选择“审查元素”即可。
4) 查看扩展程序的文件
调试扩展程序的时候,可以通过如下的方式直接访问Google Chrome扩展中的文件:
chrome-extension://<extensionID>/<pathToFile>
其中,extensionID可以通过chrome://extensions的URL查看。在开发过程中extensionID经常变化,可以使用@@extension_id替代;一旦打包部署就拥有永久的extensionID。
Chrome浏览器扩展开发系列之二:Google Chrome浏览器扩展的调试的更多相关文章
- Chrome浏览器扩展开发系列之三:Google Chrome浏览器扩展的架构
1) 不可视的background页面 Google Chrome扩展往往包含一个不可见的background页面,Google Chrome扩展的主要业务逻辑都位于此.有两种类型的backgroun ...
- Google Chrome Native Messaging开发实录(二)Chrome Extension扩展
接上一篇<Google Chrome Native Messaging开发实录(一)背景介绍>的项目背景,话不多说,有关Chrome Extension介绍和文档就不展开了,直接上代码. ...
- Chrome浏览器扩展开发系列之九:Chrome浏览器的chrome.alarms.* API
Chrome浏览器扩展程序通过chrome.alarms.* API,可以制定计划周期性地执行代码,或在指定时间执行代码. 要使用chrome.alarms.* API,首先需要在manifest.j ...
- Chrome浏览器扩展开发系列之一:初识Google Chrome扩展
1. Google Chrome扩展简介 Google Chrome扩展是一种软件,以增强Chrome浏览器的功能. Google Chrome扩展使用HTML.JavaScript.CS ...
- Chrome浏览器扩展开发系列之十四
Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59 阅读:1361 评论:0 收藏:0 ...
- Chrome浏览器扩展开发系列之十四:本地消息机制Native messagin
Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报 分类: PPAPI(27) 通过将浏览器 ...
- Chrome浏览器扩展开发系列之六:options 页面
options 页面用以定制Chrome浏览器扩展程序的运行参数. 通过Chrome 浏览器的“工具 ->更多工具->扩展程序”,打开chrome://extensions页面,可以看到有 ...
- Chrome浏览器扩展开发系列之十三:消息传递Message
由于content scripts运行在Web页面的上下文中,属于Web页面的组成部分,而不是Google Chrome扩展程序.但是content scripts又往往需要与Google Chrom ...
- C#微信公众号开发系列教程二(新手接入指南)
http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可 ...
随机推荐
- 基于R语言的梯度推进算法介绍
通常来说,我们可以从两个方面来提高一个预测模型的准确性:完善特征工程(feature engineering)或是直接使用Boosting算法.通过大量数据科学竞赛的试炼,我们可以发现人们更钟爱于Bo ...
- haproxy内存管理-free_list原理
haproxy的内存管理中,通过pool_head->free_list,存储空闲内存块,free_list是个二级指针,却把空闲内存块都串了起来,没有用next,pre之类的指针.怎么实现的? ...
- linux命令11
tar命令的使用 tar文件是把几个文件的(或)目录集合在一个文件夹里,是创建备份和归档的最佳工具. [root@localhost ~]# tar --help用法: tar [选项...] [FI ...
- Java泛型学习
1.泛型的概念 泛型即"参数化类型",就比如我们定义方法的时候,定义一个变量,称为形参,变量值根据传进去的实参的值不同而改变.而泛型的出现,就是为了解决类型也能根据传进去的类型改变 ...
- Predix Asset Service深度分析
前言 在IIOT领域,面临着保存海量数据的挑战,具体到Asset层面,则要保存物理对象,逻辑对象,复杂的关系,并支持对象间的组合,分类,标签和高效查询.总结来说,可以归纳为如下几种需求: 灵活的建 ...
- 【JAVAEE学习笔记】hibernate02:实体规则、对象状态、缓存、事务、批量查询和实现客户列表显示
一.hibernate中的实体规则 实体类创建的注意事项 1.持久化类提供无参数构造 2.成员变量私有,提供共有get/set方法访问.需提供属性 3.持久化类中的属性,应尽量使用包装类型 4.持久化 ...
- JavaSE教程-02Java基本语法-BUG:易错点
1.区别文档注释和多行注释 多行注释:多一个* 多行注释 格式: /* 注释文字 */ 文档注释 格式:/** 注释文字 */ 2.有关变量名.类名.方法名等注意点 由字母.数字.下划线.$组成,但不 ...
- Yii2中限制访问某控制器的IP(IP白名单)
有关Yii2.0鉴权之访问控制过滤器参考这篇文章 http://www.yiiframework.com/doc-2.0/guide-security-authorization.html 这里主要 ...
- 使用wget下载JDK8
每次去官网下载JDK有点烦 但是直接使用wget 又得同意协议所以 使用如下的wget就好了(注意是64位的哦) 先去官网看一下地址变化 没有如下 :修改后面的下载地址即可 注意哦~ 2.然后使用下面 ...
- 用redis实现TOMCAT集群下的session共享
上篇实现了 LINUX中NGINX反向代理下的TOMCAT集群(http://www.cnblogs.com/yuanjava/p/6850764.html) 这次我们在上篇的基础上实现session ...