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

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

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

常规 

找到开发工具 

  • 快捷方式:“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 模式,把第二个变量作为样式格式参数。

例如:

console.log("%cThis is green text on a yellow background.", "color:green; background-color:yellow");

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)的值,可以给每个属性命名。

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

console.table({ "London":{population:8173194, country:"UK", elevation:"24m"}, "New York":{population:8336697, country:"USA", elevation:"10m"}}, ["population", "country"])

结果如下:

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 视图查看你的网站,可以方便地查看元素嵌套关系,点击开发工具右上角立方体图标可以启动它。

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

最新评论

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

返回顶部