网页制作技巧教程:了解浏览器自带开发工具

http://www.itjxue.com  2015-08-07 20:44  来源:未知  点击次数: 

常规

找到开发工具

快捷方式:

  • “F12”(Windows)
  • “Cmd”⌘ +“Option” +“I”(Mac)
  • 右键选择“Inspect Element 检查元素”
  • Safari 需要在 首选项 > 高级 > 显示开发菜单,启用开发工具
  • Firebug 是 Firefox 扩展,需要在此安装

用最新的开发版

开发工具会不断完善,在开发版可以体验。 Chrome Canary 是 Chrome 实验版,Canary 和 Chrome 可以同时安装。 你可以通过 chrome://flags 进一步加强你的 Chrome 开发工具 ,启用“Enable Developer Tools experiments (启用开发工具实验)”。不要忘了点击页面底部的“现在重启”按钮。

Firefox Aurora 提供 Firefox 最新特性预览。不幸的是,Aurora 不能和 Firefox 同时打开。

Webkit Nightly 是 Safari 测试版,因此有些不稳定。Webkit Nightly 可以和 Safari 同时运行。

Opera Next 是 Opera 最新改良版,会提供一些新的功能和特性。

现在浏览器的发布周期为12周,浏览器自动更新,变化是增量的。

移动开发工具位置

有时候不想让我们的工具在屏幕底部,大部分的开发工具提供了配置选项。

Chrome 开发工具,左下角图标允许改变停靠设置。快速点击它,会在底部和右侧切换。长按可以选择停靠选项(独立窗口打开),你也可以点击并拖拽移动开发工具。

Firefox 和 Safari 开发工具,停靠选项在右上角临近关闭按钮的位置,可以新窗口打开。

要改变停靠位置,可点击左上角小虫子,选择 Firebug 界面位置(上/下/左/右)。Firebug 右上角可以快速选择:最小化,新窗口,关闭。

开发工具调试响应式设计

当调试移动站点的时候,停靠在右侧可充分利用空间,并且可以快速调整浏览器视口和开发工具的宽度,调试不同网页宽度。

在 Chrome 开发工具左下角,点击按钮可切换下侧或右侧停靠位置。

在 Chrome 开发工具右下角,点击并选择“General”标签,你可以改变工具的外观,停靠右侧时可以垂直显示面板。

学习快捷键

Chrome 的快捷键列在设置菜单里,点击右下“齿轮”图标,可以看到“Shortcuts”标签。

IE 的快捷键是在线的.aspx) 。

Opera 的快捷键也在设置按钮里。

Console 控制台

Log, Info, Debug, Warn, Error

不必用 alert 时,console.log() 是个极其有用的输出调试工具;

console.log() 是 printf 风格,因此你可以这么做:console.log("%s is %d years old.", "Bob", 42)

可以用 console.info() 输出提示信息;console.debug() 输出调试信息;console.warn() 输出警示信息;console.error() 输出错误信息。

你还可以用 %c 模式,把第二个变量作为样式格式参数。例如:

Firebug 只不过显示的图标不同,消息的背景色是一致的。

根据 MDN 的消息,他们不赞成使用 console.debug() ,因此没有图标标识,赞成用 console.log() 代替。

Chrome 和 Safari(nightly)用 info 时不显示图标,用 debug 时显示蓝图标;用 warn 时显示黄图标;用 error 时显示红图标。

你可以输出多个值,用逗号隔开即可,方便在同一行输出对象和数组,例如:console.log('Kings: ', kings);

输出数据表格

console.table() 可以用来输出数组或者对象列表,以一种合适的表格形式显示。

例如:console.table([[10, true, "blue"],[5, false]]) 将输出以下格式:

如果元素的数量不匹配,表格将显示 undefined 表示没有数据。

自定义列名,属性名必须在对象中指定元素。自定义(index)的值,可以给每个属性命名。

第二个可选的变量允许你明确指定哪一列要输出。

结果如下:

Assert

console.assert() 用于测试表达式的真假。

它有两个参数:表达式和显示信息。如果表达式是 FALSE 时,信息将会显示。

例如:console.assert(!true, 'This is not true'); 输出”This is not true”。console.assert(true, 'This is not true'); 什么也不输出。

使用控制台定时器

使用 console.time(label),定时器在控制台启动。字符串 label 是必须的,我们想停止它时,有个定时器引用。调用 console.timeEnd(label) 定时器停止,控制台输出定时器执行的毫秒数(通过 label 识别)。

持久控制台

有时页面加载时,你需要保留控制台信息。有时在点击或离开页面时,我们需要这个作为参考或者用来查看日志。

在 Chrome 里,右键点击控制台,显示菜单里有“Preserve Log upon Navigation”,选择它将保存你的控制台内容。

Firefox 默认会保存控制台信息。你可以点击右上角“清除”按钮清除控制台日志,或者打开/关闭工具。

在 Firebug 里,有个显著的按钮用来保持控制台内容,就在控制台的上部。

Opera 默认保存控制台内容,你可以右键选择“clear console”清除控制台日志或者重开工具。

重新运行命令

如果已经在 JavaScript 控制台输入过命令,你想重新运行它,简单点一下“上”箭头即可翻看原先的命令列表。

任意 Tab 打开控制台

在 Chrome ,尽管控制台有自己的 tab ,在任意 tab 按下“ESC”键即可打开控制台,因此不必切换 tab 了。

Safari 控制台在开发工具的底部,“ESC”键用来切换控制台日志的可见性。在命令行执行一个命令也将打开控制台日志。

在 Firefox ,快速切换到控制台:“Ctrl + Shift + K ”(Windows),“Cmd ⌘ + Option ⌥ + K ”(Mac)。

改变框架焦点

用命令行运行 JavaScript 非常实用,但是如果页面有 iframe ,你又不知道如何定位框架,就不好办了。

在 Firebug ,你可以用下面的命令聚焦框架: cd(window.frames[‘frameName’]);

Chrome 可以在控制台底部的下拉列表中改变框架。

Opera 在“Console 控制台”和“Documents 文档” 有个改变框架的下拉菜单。

你可以通过 document.getElementsByTagName("iframe"); 获得 iframe 列表。

引用当前和前一个元素

如果你的“Elements”标签选择了一个元素,你可以用 $0 调用它。输入 $0.innerHTML 试试看。

在 Firebug 和 Opera,你可以用 $1 选择前一个元素。

在 Chrome 和 Safari,你可以通过 $1 - $4 选择更靠前的元素。

在 Firebug ,你可以通过 $n(2) - $n(5) 选择更靠前的元素。

最终求值表达式

如果你需要先前表达式的结果用于后面的求值,你可以使用便利 $_ ,最终表达式结果自动展示给你。

Firebug 1.12 开始支持。

检查

通过面包屑导航 DOM

当你检查 DOM 树的节点时,节点的 DOM 路径面包屑列表显示在开发工具里。

Chrome 和 Opera,显示在 DOM 检查器的底部。

Firebug,Firefox 和 Safari,显示在 DOM 检查器的顶部。

你可以直接点击节点,或者按箭头键导航面包屑。按左箭头是父节点,按右箭头是第一个子项。上下箭头导航到下一个或前一个子节点。没有更多子节点,上下箭头导航回到 DOM 树。

在 Firefox ,你可以右击面包屑看兄弟节点列表,可以快速导航到兄弟节点。

在 Safari,你可以左击面包屑看兄弟节点。

搜索 DOM 节点

在 Firefox ,你可以在“检查器”面板搜索特别的节点。面包屑右边有个小的搜索框有同样作用。

聚焦时搜索框变大。

输入一个匹配的选择器, DOM 树将自动高亮它。

在 Chrome ,你可以按 Ctrl-F 打开对话框,CSS 选择器如期工作。

检查字体

Firefox 有个字体检查器,可以查看当前元素使用的字体。

你可以修改默认的“Abc”文字,在字体列表底部有个按钮,可以显示页面所有字体。

浏览你的响应式网站

在响应式设计时代,最重要的是如何在任意尺寸的设备查看我们的网站。尽管我们可以调整浏览器大小,开发工具里还是有一些其它的工具可用。

在 Chrome 开发工具的“设置”面板(工具右下角点击齿轮),在“Overrides”标签,你会发现“Device Metrics 设备指标”选项,你可以指定宽度和高度,以及字体缩放尺寸。你可以把开发工具停靠在右侧,然后调整页面大小测试。

Firefox 开发工具内置一个‘响应式设计模式’工具,此工具在开发工具的右上角。它包含一些预设的尺寸,你可以添加需要的尺寸。Firefox 也提供旋转的选项,你可以测试 landscape 和 portrait 模式。

3D 视图

Firefox 开发工具可以 3D 视图查看你的网站,可以方便地查看元素嵌套关系,点击开发工具右上角立方体图标可以启动它。

编辑

改变 CSS 值

如果有个元素需要修改 margin,padding,width 或者 height,可以使用方向键增加/减少尺寸。简单使用上下方向键增加/减少1个单位。

“Shift” + 上下方向键,可以增加/减少10个单位;“Alt” + 上下方向键,可以增加/减少0.1个单位。

“Shift” + Page-Up / Page-Down,可以增加/减少100个单位。

当你矫正尺寸时,这些快捷键非常实用。

改变 :active, :hover, :focus, :visited 状态样式

在开发工具里修改 CSS 非常爽,但是碰到 hover 之类的伪类就有点挠头了。恰好有解决方案。

Chrome 有个按钮是干这用的,在“Elements”标签右手边看到一个虚线框和光标在一起的图标,它可以切换其它状态。

Firebug 的 HTML 标签右侧,点击样式小箭头,可以选择想要的状态。Firebug 并没提供 :visited 状态选项。

Firefox 为你选择的 DOM 元素提供一个下拉菜单,右键选择“查看元素”可以看到它,Firefox 同样没提供 :visited 状态选项。

在 Opera,“样式”标签有个像列表的图标,Opera 提供了 :link 和 ::selection 选项。在新版 Opera ,位置跟 Chrome 一致了。

在 Safari,DOM 上右击一个元素,显示一个菜单,里面有“Force Psuedo-Classes”选项。

拖拽重排元素

在 Chrome 和 Safari 里,,“Elements”标签下,可以拖拽重排元素顺序。简单点击拖动元素即可,目标位置会出现一条线。

使用 SASS Source Maps

使用 CSS 预处理器有许多优势,但是在浏览器开发工具中修改比较困难。例如,当你再次运行 SASS 时, 在开发工具中保存的编译后CSS 可能被覆盖,不太理想。SASS 3.3 以上(可以安装使用‘sass gem install sass –pre’),为 SASS 文件创建映射很容易,你可以很容易的保存修改。

首先,为 SASS watch 命令增加 --sourcemap ,像这样:

然后在 SASS 文件底部添加映射文件的名字(sourceMappingURL):

然后,你需要启用“Experiments 实验”。地址栏输入 chrome://flags 启用“启用开发者工具实验”选项,点击页面底部“马上重启”按钮应用改变。在 Chrome 开发工具的右下角,点击齿轮按钮打开“设置”面板。

点击“General 常规”标签,激活“Enable Source Maps 启用 Source Maps”。点击“Experiments 实验”标签,检查“Support for SASS 支持 SASS ”选项。

重启浏览器,你可以直接查看 SASS 文件的行号了。

调试

用 debugger; 调试

添加此行代码:debugger; 可以自动创建断点,当开发工具打开时运行,断点会自动创建。

尽管快速添加断点很方便,不用在开发工具一行一行找,小心不要把 debugger; 提交到线上环境。

条件断点

不必每次生效时,条件断点很有用。例如,你知道你的代码在最后一项有 bug,你可以用条件判断在最后一项时激活 debugger。条件满足,断点触发。

在 Chrome 中创建条件断点,先创建个正常的断点,然后右击断点选择“编辑断点”添加条件。

在 Firebug ,先创建常规断点,然后右击出现输入框,可以添加条件。

在 Firefox ,右击想创建断点的行,选择“增加条件断点”。

在 IE,先创建常规断点,然后右击断点,选择“条件…”。

在 Opera,先创建常规断点,然后右击断点,选择“添加条件”。

在 Safari,确保脚本和“调试器”面板都打开,创建一个断点,然后在“调试器”面板右击同样的断点,选择“编辑断点”。

DOM 断点

如果特定的 DOM 改变,你的页面会被破坏,或者你只想找出元素属性或子元素改变,哪些代码生效,Chrome 和 Firebug 均可以在 DOM 修改时设置断点,你可以找到代码问题的根源。简单点击你想监控的元素,右击选择“break on”选项。

XHR 断点

在 Chrome ,可以为 XmlHttpRequest 设置断点,你可以调试 AJAX 请求。到“Sources”标签选择“XHR 断点”,点击右侧加号图标,输入部分或所有你想添加断点的 URL 。一旦请求返回,断点将生效,你可以看到返回的数据,并可单步调试后续操作。

取消勾选可以关掉断点,右键选择“Delete Breakpoint 删除断点”删除断点。

在 Firebug ,到网络标签选择“在 XHR 时中断”按钮,或者右键选择“在 XHR 时中断”,你也可以随意选择中断条件。

检查断点的作用域

在 Chrome ,Javascript 在断点处暂停时,你可以查看当前作用域的所有变量和对象,既可以悬浮查看,也可以通过控制台查看。

Firebug 有同样的选项,但是需要在 DOM 菜单选择“show closures”。 如果断点设置恰当,这个强大的属性让你很容易查看闭包里的变量。

Firebug 有额外的功能,无需在断点停止,即可访问隐藏的闭包变量。看此例:

代码访问以下闭包变量: closure.%variable 以上例子,你将用这个表达式访问 name:someone.introduce.%name // ==> “Arthur” 注意你也可以改变值:

Firebug 中,需要 JavaScript 的地方,同样的语法都会生效,例如监控面板和条件断点。

监控值

在“脚本”标签的右上角,监控变量相当容易,只有输入变量名,“监控”将让它的值保持更新。

调试压缩后的 JavaScript

下断点让 JavaScript 调试更容易,但是如果代码已经放到生成环境,很可能已被压缩。如何调试最小化的代码呢?庆幸的是一些浏览器已经支持解压你的 JavaScript 。

在 Chrome 和 Safari ,选择“脚本”标签,找到相应的文件,然后点击“{}”图标(pretty print,在面板底部)。

在 IE ,点击工具图标选择下拉菜单,找到格式化 JavaScript 选项。

Opera 自动格式化压缩的 JavaScript 。

使用 JavaScript Source Maps

当我们部署代码到生产环境时,比较明智的是压缩代码减少加载时间。压缩去除了无用的字符(比如注释),空行和空格。可是压缩后很难调试,无法单步调试,代码不易读。JavaScript source maps 调试压缩后 JavaScript 文件非常有用,它提供一个映射关联到未压缩文件。

创建 JavaScript source maps ,下载 Google Closure Compiler ,它帮你生成 .map 文件。

运行带 Source Map 属性的 Closure Compiler :

在压缩后的 JS 文件底部加上映射文件的名字: sourceMappingURL

在 Chrome 开发工具,,“Settings 设置”菜单 -> “General 常规”标签,激活“Enable Source Maps 启用 Source Maps ”。

现在,当你调试 JavaScript 时,可以用未压缩的版本查找问题所在。

模拟User Agent

有时伪装成不同的浏览器或设备用于调试,特别是某个网站用到了设备探测。

在 Chrome ,打开设置菜单(右下角齿轮图标),选择“Overrides”选项,找到 “User Agent”选项。你可以选择内置的选项,也可以选择“Other”自己添加。如果你选择移动或平板设备, Chrome 将调整浏览器尺寸 - 取消勾选“Device Metrics”,很容易关掉此功能。

在 Opera ,点击浏览器左下“面板”箭头(开发工具以上),选择 + ,然后选择“自定义”,到“按钮”标签选择“首选项”,然后拖住“识别为 Opera ”下拉框,拖到浏览器工具栏。

模拟触控设备

Chrome 可以伪装成支持触控的设备,直接在浏览器模拟 touch 事件。在设置面板(Chrome 开发工具右下角齿轮图标),选择“Overrides”选项,选择“Emulate Touch Events 模拟触控事件”。

在 Chrome Canary ,用个圆形代替了光标,可以用于区分处于哪种模式。

覆盖地理位置

如果你的应用用到了 Geolocation ,模拟不同的位置会非常有用。在 Chrome ,“设置”菜单,选择“Overrides”标签,这里可以模拟不同的经度纬度,也可以模拟不可用的位置。

 Google Maps Labs 启用了坐标提示,你就可以从 Google Maps 获得位置的经纬度。

重写设备方向

设备方向改变可以在 Chrome 中模拟。“Settings ”-> “Overrides”,选择“Override Device Orientation”,在输入框输入新值。

Alpha 代表沿 z 轴 0-360 度。 Beta 代表沿 x 轴 -180 到 180 度 - 前到后运动 Gamma 代表沿 y 轴 -90 到 90 度 - 左到右运动

改变值将触发 deviceorientation 事件。

调试 Canvas 元素

Chrome 可以用开发工具调试 canvas 元素,可用于 2D 和 WebGL canvas 项目。

首先启用“Experiments”标签,地址栏输入 chrome://flags ,启用“Enable Developer Tools experiments”,按下“Relaunch Now”按钮应用改变。到设置面板,找到“Experiments”标签,选择“Canvas inspection”选项。

现在访问“Profile”标签,你可以看到“Capture Canvas Frame 捕获 Canvas 帧”选项。使用期间可能需要重载页面。按下“Start 开始”捕获 canvas 应用的单个帧。你也可以点击下面的框,切换到“Consecutive Frames 连续帧”,你可以捕获多帧。

每次访问 canvas Chrome 会创建日志,提供每次访问上下文的列表以及快照。你可以点击一个日志项重播那帧,看看哪些命令被调用,及它们在哪一行。

运行代码片段

如果你发现同样的代码需要重复的运行,Chrome Canary(Chrome 29 已有此功能) 提供了便捷的“Snippets 片段”区域,你可以保存代码。

在“Source”标签,“Sources”和“Content scripts”后面有个“Snippets ”标签,右键点击空区域,点“New”创建新的片段,写入一些代码,无论何时再想运行它时,右键点击选择“Run 运行”即可。

Firefox 6 + 的代码片段速记器(开发工具右上角小本子图标)跟这很类似。

性能

禁用浏览器缓存

每个浏览器都可以禁用网页的缓存,确保资源每次都从服务器加载。

Chrome ,设置小齿轮里找,“General”-> “Disable cache”。

IE 菜单栏的“Cache 缓存”下面。

Opera,点击网络标签清除缓存,选择“网络选项”-> “禁用所有缓存”

Firebug,网络标签 -> 下拉菜单“禁用浏览器缓存”

在任何浏览器呼出清除缓存对话框,Ctrl + Shift + Delete(Windows),Shift + Cmd + Backspace(Mac)。

排序网络请求找到瓶颈

在网络标签按顺序显示每个请求的资源,点击每列的标题可以重新排序。

大部分的浏览器在网络标签共享公共字段,你可以通过文件名;域名;资源类型;HTTP 状态;方法和资源大小这些字段排序。

在 IE 中,文件名和域名字段合并了。

Chrome 更进一步,点击“Timeline”字段显示额外的排序选项:

  • Start Time 默认选项,按每个请求开始时间排序
  • Response Time 按网络请求获得响应的时间排序
  • End Time 按请求完成时间排序
  • Duration 按请求完成花费时间排序
  • Latency 浏览器初始请求到接收响应的时间总和。以等待时间排序,可以看看哪个资源占用了大量时间等待响应。等待时间依赖于用户距服务器的距离,设置 Content Delivery Networks (CDN)可以改善此时间。合并 CSS 和 JavaScript 文件,图像拼接可以减少资源请求数,因此减少总延迟。

网络时间轴导出为 HAR 文件

HAR(HTTP 存档)文件可以用于各种性能分析技术和调试。测试提 bug 时可以附上 HAR 文件 - 开发人员可以在本地运行 HAR 数据查找问题原因。

我们可以用 Chrome 开发工具导出网络标签时间轴,右键点击网络输入,选择“Save as HAR with Content”。

Firebug 需要另安装插件 Net-export,此工具由 Firebug 开发主管和 HAR 格式创造者开发。

chromeHAR 是个在线工具,提供跟 Chrome 一样的时间轴界面,功能类似。

检查 DOMContentLoad 和 Load 事件

Chrome 和 Safari (以及 Firebug 网络面板)的网络时间轴显示网页加载有多快,用一条线标记 DOMContentLoaded 和 load 事件触发的时机。

  • 当浏览器解析文档完毕(但是其他资源比如图像,样式表可能未下载完毕)DOMContentLoaded 触发,它用蓝线标识。
  • 当所有初始资源(图像,样式表,JavaScript)加载完毕,load 事件触发一次,它用红线标识。
  • 当两个事件同时触发,标识线是紫色的。

在 Safari ,标识线是虚线。

重发送 XHR 请求

如果希望重发送 XHR 请求,但不想刷新页面或重触发事件,可以右键点击资源,选择“Replay XHR”(Firebug 叫“Resend”)。

测量渲染性能和 FPS

Chrome 提供了帧率时间轴,可以逐帧调试网站。

要创建帧时间轴,首先打开 Chrome 开发工具,选择“Timeline”标签,底部黑色的圆形代表“record 记录”,按下开始时间轴记录,按第二次停止记录。记录的同时,你可以跟网页正常交互,帧模式会记录所有帧的行为。

时间轴图表每一条代表单帧动画,不同的颜色表示如下: 蓝色表示加载任务,黄色表示脚本任务,紫色表示渲染任务,绿色表示绘制任务,白色区域代表空闲时间。

时间轴图表下面是网页性能的瀑布图,帧显示在标题列,标题单元格还包含画这帧花费的毫秒数;相应的动作也记录在左侧。

你可以拖动两个灰色的鼠标滑块,改变你想检查的帧的数量。

悬停在时间轴的标题行显示帧的持续时间;FPS 数值;CPU 时间和与帧交互的合计时间。

悬停在左侧的记录上面,可以看到每个任务的持续时间;还有其它有用信息。如果有页面相关的部分,则会高亮,有些任务被分组了,点击瀑布图的箭头查看。

移动端

开发工具调试 IOS

把 IOS 设备连接到可用的 Mac,打开 Mac 和 IOS 设备的 Safari 。

找到 Safari 的“Develop 开发”菜单,第一个菜单分隔线的后面应该是你要连接的 IOS 设备的名字。在子菜单选择你想调试的页面。

Safari 的开发工具将以弹出窗口的式出现,你可以调试移动设备的站点了。

开发工具调试 Android

你可以用Mac 上的 Chrome Canary 开发工具调试安卓设备上的公共和本地网站,你可以在手机上访问 Chrome 开发工具的广泛的特性集。

首先,需要在安卓设备安装 Chrome BETA 

然后,需要下载 ADB 插件扩展,安装到 Chrome Canary 上。从未在 Google Play 商店下载过的话,需要拖拽文件到扩展页 (chrome://extensions/)。

确保已经在 chrome://flags 里面打开“Enable Developer Tools experiments 启用开发工具实验”。

手机用 USB 线插到电脑上,在手机找到“设置”,选择“开发人员选项”,确保“USB 调试”选上。如果它已经选上,而你以前从未用过 USB 调试,取消选择,重选一次,确保它有此计算机的 MAC 地址。

现在到安卓上的 Chrome BETA ,点击菜单图标和“Settings 设置”,确保“Enable USB Web debugging 启用 USB Web 调试”启用。打开新标签。

在 Chrome Canary ,点击 ADB 插件图标,点击“Start ADB”,需要重启浏览器。

访问检查页(chrome://inspect ),找到设备(需要 Chrome Canary 28 +),找到要调试的标签。点击页面 URL 右侧的“Inspect 检查”链接。

弹出“Settings 设置”窗口,点击“Experiments 实验”标签,启用“Reverse Port Forwarding ”,你需要关闭窗口重启开发工具,“Port Forwarding”标签出现之前,再点“Inspect 查看”链接。

在 Port Forwarding 标签,输入想转发的端口(例如 9000),地址,应该可以映射到本地的电脑了。现在,在移动设备输入 localhost:端口号(如 localhost:9000),本地的站点应该加载到移动设备上了,并且可以调试了。

扩展

覆盖地理位置

在 Firefox ,位置 API 可以像 Chrome 一样覆盖,需要 Geolocater 扩展 

安装后到“Tools”工具菜单,“Geolocater”,“Manage 管理”,在这你可以通过浏览地图或搜索位置,直接添加“伪造的”地理位置。你可以覆盖先前预设的地理位置。可以到 html5demos for Geolocation 页试试。

(责任编辑:IT教学网)

更多