codetc - 网站开发技术 首页 前端 查看内容

浏览器自带开发工具的秘密

2014-9-27 23:34| 发布者: CODETC| 查看: 7874| 评论: 0|来自: w3cfuns

编辑

改变 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 --watch scss/devtoolsecrets.scss:css/devtoolsecrets.min.css --style compressed --sourcemap

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

/*@ sourceMappingURL=devtoolsecrets.css.map */

然后,你需要启用“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 有额外的功能,无需在断点停止,即可访问隐藏的闭包变量。看此例:

function Person(name) { this.introduce = function() { console.log("Hello, my name is %s", name); } } // create an instance of Person: var someone = new Person("Arthur"); // we call a closure! someone.introduce(); // prints "Hello, my name is Arthur"

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

someone.introduce.%name = "Trillian"; someone.introduce(); // prints "Hello, my name is Trillian"

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 :

java -jar compiler.jar --js common.js --create_source_map ./common.js.map --source_map_format=V3 --js_output_file common.min.js

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

//@ sourceMappingURL=common.js.map

在 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 + 的代码片段速记器(开发工具右上角小本子图标)跟这很类似。

文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-1-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部