计算机教程

Chrome开发者工具不完全指南(五、移动篇)

15 2月 , 2019  

Chrome开发者工具不完全指南(五、移动篇)

2015/07/06 · HTML5 ·
Chrome

原文出处:
卖烧烤夫斯基   

前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能AuditsConsole面板。

一、Audits

Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是网络加载性能,另一类是界面性能。首先开下它的主界面。

必赢娱乐棋牌 1

Audits面板的网络优化建议参照的是雅虎前端工程师的十四条黄金建议。为了验证这一点,我们可以做一次简单的测试。根据十四条web性能建议中的其中一条:把css文件应该放入html文档的顶部,避免网页在渲染dom后出现闪烁的问题。我们写如下不规范代码

XHTML

<!DOCTYPE html> <html> <head>
<title></title> </head> <body> </body>
<!– 把css文件放入底部 –> <link rel=”stylesheet”
type=”text/css” href=”xuu.css”> </html>

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
 
</body>
<!– 把css文件放入底部 –>
<link rel="stylesheet" type="text/css" href="xuu.css">
</html>

然后我们开始run了。你可以看到它会给出我们期望的建议,在web Page
Performance里面它给出了红点,后面的建议是:将css放入头部:

必赢娱乐棋牌 2

提升界面性能对于用户体验来说非常重要。如果你按照了十四条建议来处理优化你的web界面,那么出现在Audits中的信息会变得很少。如果你还不知道这十四条建议,我推荐你去阅读《web高性能建站》这本书。相信会对你有帮助。

二、Console

Console面版可以输出你自己代码。它可以配合其他面板一起使用。点击右上角的>_剪头可以启用或者收起它。它也分了四个选项:

Console:  用于输出和现实调试信息
Search:  在域名下查找文件和内容
Emulation :  启用移动开发模式
Rendering:  在界面显示各种监控信息

关于Console的玩法,已经有一位大神详细讲解过。我这里就不一一介绍。点击这里去拜读大神的文章吧。Search也比较简单,露珠就不啰嗦了。现在主要讲解一下Emulation模式下的移动开发。移动开发毫无疑问已经成为web开发的主力军了。所以,chrome也打造了一款配合我们开发和测试的工具。

1.进入移动开发模式

手机开发模式我的建议是把控制面版右置。这样对手机开发来说是方便的。长按控制面板右上角类型标签(img4)可以切换控制面板的出现位置。调整完控制面板的位置后。点击Emulation然后再点击出现在选项击面版中的文字。或者你直接点击开发者工具界面左上角的手机图标进入开发者模式。你可以看到当你切换到移动开发模式后,鼠标已经变成了小黑圈圈了。

2.调试设备

Device下拉菜单中选择不同的手机模式。里面包括安卓和苹果系统的流行机器。勾选Emulate
mobile选项可以适应屏幕。Resolution这一项可以调整手机屏幕的高度和宽度。

3.模拟网络状况

Netword中选择模拟的网络状况。包括主流和非主流的各种网络。(WIFI,3G,2G等)Sensors选项中自定义移动端的经纬度。在模型中可以设定3D视图角度。把鼠标放上去直接旋转模型。这个功能暂时没发现有啥卵用。

必赢娱乐棋牌 3

很多调试可以在界面进行,这也是露珠通常做的。实际应用到的选项chrome都人性化地列在了主界面。选择了移动开发模式后界面会变成这样子:

必赢娱乐棋牌 4

需要注意的是,Chrome浏览器模拟的只是界面,内核和原生的很多功能是模拟不了的,不过这对于做html5移动开发的来说已经足够了吧。

三、结束语

本篇文章主要介绍了移动开发测试的工具部分。chrome在模拟移动开发时效果有些欠缺。如果需要真机调试,诸位可以考虑UC流浪器的开发版本(只支持安卓),chrome的移动版本(只支持安卓),或者自己买台mac(露珠买不起啊)再买台iphone(露珠的是小米的吊死机啊)配合联调。weinre那玩意儿只能调样式,还得自己加代码建议就不要去用了。好了,Chrome开发者工具都介绍的差不多了,下一篇是本系列的尾篇。介绍几款插件用(包括高大上的开发者工具皮肤哦),敬请关注!

1 赞 8 收藏
评论

必赢娱乐棋牌 5

DevTools有一个可以模拟CSS状态的功能,例如元素的hover和focus,可以很容易的改变元素样式。在CSS编辑器中可以利用这个功能

## 十二、可视化的DOM阴影

![](http://www.chenwei.farbox.com/\_image/6a.png?fb\_file\_hash=origin/e356b042e242ae55b365a95491cc9a2909890ed3)

## 一、快速切换文件

## 十一、强制改变元素状态

Workspaces是Chrome
DevTools的一个强大功能,这使DevTools变成了一个真正的IDE。Workspaces会将Sources选项卡中的文件和本地项目中的文件进行匹配,所以你可以直接编辑和保存,而不必复制/粘贴外部改变的文件到编辑器。为了配置Workspaces,只需打开Sources选项,然后右击左边面板的任何一个地方,选择Add
Folder To Worskpace,或者只是把你的整个工程文件夹拖放入Developer
Tool。现在,无论在哪一个文件夹,被选中的文件夹,包括其子目录和所有文件都可以被编辑。为了让Workspaces更高效,你可以将页面中用到的文件映射到相应的文件夹,允许在线编辑和简单的保存。

标签(空格分隔): chrome 开发技巧

Web浏览器在构建如文本框、按钮和输入框一类元素时,其它基本元素的视图是隐藏的。不过,你可以在Settings
-> General 中切换成Show user agent shadow
DOM,这样就会在元素标签页中显示被隐藏的代码。甚至还能单独设计他们的样式,这给你了很大的控制权。

## 十四、改变颜色格式

Chrome’s Developer
Tools有内建的美化代码,可以返回一段最小化且格式易读的代码。Pretty
Print的按钮在Sources标签的左下角。


– 3、在你的地址栏 输入chrome://inspect 你就会看见下面的界面 (在Discover
USB devices 打勾),

**注意如果你是第一次打开 chrome://inspect 记得要翻墙,因为chrome
是google的,你懂的,如果你没有工具请点击[这里](http://lanterncn.cn/down)\*\*

![](http://www.chenwei.farbox.com/\_image/5.gif?fb\_file\_hash=origin/f623c74258c070946b018c16154fc34e0ca993dc)

![](http://www.chenwei.farbox.com/\_image/16-2.png?fb\_file\_hash=origin/bad7ce0a7fbca5464d8a3437da240ea9b05e6cb9)

# 16个必须知道的chrome开发者技巧

勾选在Console标签下的保存记录选项,你可以使DevTools的console继续保存记录而不会在每个页面加载之后清除记录。当你想要研究在页面还没加载完之前出现的bug时,这会是一个很方便的方法。

$()–document.querySelector()的简写,返回第一个和css选择器匹配的元素。例如$(‘div’)返回这个页面中第一个div元素

– 2、将手机通过数据线连接到电脑,电脑会自动安装驱动,然后
开发者模式打开,允许远程连接调试

![](http://www.chenwei.farbox.com/\_image/3.gif?fb\_file\_hash=origin/afeef63ce92d71b148c65e42dbd350499e411573)

![xx](http://www.chenwei.farbox.com/\_image/1.gif?fb\_file\_hash=origin/317f60be6ae8ba21bef990b859d839c791ef8f72)

## 八、设备模式

![](http://www.chenwei.farbox.com/\_image/126.gif?fb\_file\_hash=origin/51c2d933b429dbba941c3573e60a0ea20c722cb4)

![](http://www.chenwei.farbox.com/\_image/7.gif?fb\_file\_hash=origin/ed153f7868b628e2bcb8ccc7932f140d0b03390b)

– 4、最后你只需要点击 inspect
就出现如下的界面,然后就可以像PC那样调试你的界面

通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面
然后用手机打开要调试的页面 刷新页面查看调试结果,但是这就存在两个问题
在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新
那怎么能达到在pc端修改代码
在手机上直接看到修改结果这样的所见即所得的效果呢
chrome做到了。最重要的是可以调试webapp,如果你是原生app,或者是混合app就不行。

## 十六  Chrome远程调试移动端Web开发

当编辑一个文件的时候,你可以按住Ctrl(cmd for
mac),在你要编辑的地方点击鼠标,可以设置多个插入符,这样可以一次在多个地方编辑。

![](http://www.chenwei.farbox.com/\_image/8.png?fb\_file\_hash=origin/92c9987e145070c48a905453dcfe45844cfb29e7)

必赢娱乐棋牌,![](http://www.chenwei.farbox.com/\_image/16-1.png?fb\_file\_hash=origin/923ba287a9541a2e7988653c468f59355cd14450)

另外一种方式是按Ctrl + O,输入:和行数,而不用去寻找一个文件。

## 十、颜色选择器

在Sources标签中打开一个文件之后,在Windows和Linux中,按Ctrl + G,(or Cmd


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图