chrome览器前台常用调试功能介绍.docVIP

Chrome浏览器常用调试功能介绍 2011-1-5 目录 TOC \o 1-3 \h \z \u HYPERLINK \l _Toc32295 1目的 PAGEREF _Toc32295 3 HYPERLINK \l _Toc4027 2.浏览器选择 PAGEREF _Toc4027 3 HYPERLINK \l _Toc25746 2.1推荐浏览器 PAGEREF _Toc25746 3 HYPERLINK \l _Toc9798 2.2 扩展功能 PAGEREF _Toc9798 3 HYPERLINK \l _Toc18864 2.2.1 常用扩展 PAGEREF _Toc18864 4 HYPERLINK \l _Toc27217 2.2.2 开发相关扩展 PAGEREF _Toc27217 4 HYPERLINK \l _Toc23175 3.工具使用 PAGEREF _Toc23175 4 HYPERLINK \l _Toc31624 3.1开启开发者工具 PAGEREF _Toc31624 4 HYPERLINK \l _Toc19402 3.2常用面板 PAGEREF _Toc19402 6 HYPERLINK \l _Toc26794 3.2.1 大致介绍 PAGEREF _Toc26794 6 HYPERLINK \l _Toc12996 3.2.2 元素面板 PAGEREF _Toc12996 6 HYPERLINK \l _Toc21810 3.2.3 js调试面板 PAGEREF _Toc21810 10 HYPERLINK \l _Toc740 3.2.4 js控制台 （console） PAGEREF _Toc740 12 HYPERLINK \l _Toc13643 4.参考资料 PAGEREF _Toc13643 15 1目的 通过本文档简单介绍了前台调试比较有用的开发技巧，由于我也是在学习中，我挑选了一些我认为比较有用的功能列出来。可能以前有用过firebug调试工具，差不多类似。 2.浏览器选择 2.1推荐浏览器 Chrome官方浏览器和基于chrome官方浏览器开发的双核浏览器。基于国内的网站兼容性情况可以选择双核浏览器，比如360极速，枫叶浏览器，sumchrome浏览器等等。双核浏览器提供了两种浏览模式，极速和兼容模式，兼容模式将会以本地ie版本进行浏览。 备注：双核浏览器只能在极速模式下才能打开浏览器开发人员工具。 推荐360极速浏览器 （目前双核里面稳定性最好的浏览器），下载地址： HYPERLINK / / 2.2 扩展功能 使用chrome必须要用到扩展功能 2.2.1 常用扩展 HYPERLINK /extensions/list/popular?hl=zh-CN /extensions/list/popular?hl=zh-CN 2.2.2 开发相关扩展 /extensions/featured/web_dev 3.工具使用 3.1开启开发者工具 右键点击网页上的任一元素，在弹出菜单中选择“审查元素”。 在 Windows 或 Linux 操作系统上，使用 Ctrl+Shift+I 快捷键打开开发人员工具（或使用 Ctrl+Shift+J 直接进入 JavaScript 控制台）。 点击位于浏览器用户界面右上角下拉菜单?? ，具体菜单如下图 打开开发者工具后，如下图所示 开发者工具 3.2常用面板 备注：chrome9.0后面板增加了一个network 3.2.1 大致介绍 这里只介绍常用的面板， 元素（Elements）面板、脚本（Scripts）面板 其他面板功能 3.2.2 元素面板 在元素（Elements）面板中，可以看到整个页面的 DOM 树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。 我们这里以? HYPERLINK .hk/ Google 简体中文首页为例，鼠标右键单击“ Google 搜索” 按钮，选择“审查元素”，您会看到如下的窗口界面（注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可通过点击窗口左下方的“停靠” 图标??将其变为内嵌模式）： ? 在工具窗口右侧，显示的是被选元素的样式信息，如有兴趣，可以尝试通过双击现有属性来修改该元素的 style 属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时观察页面的实时变化。那怎样给现有的元素或者选择器增加一个属性值呢？不