来自 Web前端 2019-10-03 15:10 的文章
当前位置: 澳门三合彩票 > Web前端 > 正文

现在介绍最后两块功能,chrome 开发技巧

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

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

使用步骤

![]()

2.chrome模拟器调试

还是要介绍下chrome的模拟器调试(万一有人不知道呢~),其实这是最长用的开发调试方式了,对于大部分浏览器webkit内核浏览器适用,关键还可以选择各种机型;

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

(4)调试

页面跑起来以后通过访问http://10.242.101.173:8081/client/#anonymous
就可以看到所有访问这个页面的手机啦

澳门三合彩票 6

查看weinre中页面访问情况

澳门三合彩票 7

通过pc可以控制移动端浏览器看到的页面,修改吧~

设备模式的另一个很酷的功能是模拟移动设备的传感器,例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。这个功能位于元素标签的底部,点击“show drawer”按钮,就可看见Emulation标签 --> Sensors.

正确的打开方式

打开chrome浏览器windows按F12、mac按option+command+i 进入开发者工具界面,于是,任性地调试啦~

澳门三合彩票 8

chrome开发者工具

## 七、优质打印

参考

Weinre Home
chrome手机端调试
微信web开发者工具开发文档
UC浏览器开发者版本文档

## 二、在源代码中搜索

weinre安装使用

如果你使用过sublime text,那么你可能不习惯没有Go to anything这个功能的覆盖。你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开的时候,按Ctrl+P(cmd+p on mac),就能快速搜寻和打开你项目的文件。

主要功能

  • DOM查看和修改
  • JavaScript调试、CSS调试
  • 网络状态查看
  • 资源文件查看
  • Console控制台

想要了解更多控制台命令,戳这里:Command Line API

4.chrome移动端远程调试

![]()

5、微信web开发者工具

微信今年推出了 web 开发者工具,能够帮助开发者更方便、更安全地开发和调试基于微信的网页,它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。
通过微信web开发者工具可以:

  • 使用自己的微信号来调试微信网页授权
  • 调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出
  • 使用基于 weinre 的移动调试功能
  • 利用集成的 Chrome DevTools 协助开发

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

(3)web页面引入脚本,项目启动

将生产的javascript 标签引入自己开发的web页面中,启动项目;
http://10.242.101.173:8081/target/target-script-min.js#anonymous

Example:
<script src=";

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

1.log方式

通过console.log()方式,将代码执行关键过程输出出来,基本可以定位问题出现位置,但这种方式对于页面样式问题无能为力;

## 一、快速切换文件

(1)安装

sudo npm -g install weinre

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

(2)启动

weinre --httpPort 8081 --boundHost -all-
启动成功,访问地址http://localhost:8081/
如图:

澳门三合彩票 9

weinre启动成功

![]()

3.Weinre

Weinre 是<strong>WE</strong>b <strong>IN</strong>spector <strong>RE</strong>mote.是一个web页面调试工具和检查工具,通过weinre可以PC和手机,在PC中操作页面跟手机操作一样,完成页面的调试。

DevTools控制台支持一些变量和函数来选择DOM元素:

(1)下载微信web开发者工具

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

(2)安装打开,并登录调试;

界面如下图所示,想进行页面调试首先需要登录,如果只是模拟器上调试页面内容,在地址栏直接输入网址;通过js-sdk可以看到微信微信分享之后的各个字段内容;点移动调试按钮按按步骤设置一下手机代理即可,甚是方便;

澳门三合彩票 10

微信web开发工具

  • Shift + F (Cmd + Opt + F),这种搜寻方式还支持正则表达式哦

使用步骤:

(1)手机、PC都有chrome浏览器;
(2)数据线连接PC和手机,手机开启调试模式;
(3)chrome浏览器地址栏输入chrome://inspect,就可以调试手机版的chrome页面啦

澳门三合彩票 11

chrome远程调试

![]()

6、UC浏览器开发者版

UC浏览器总是时不时报出奇奇怪怪的问题,而其他浏览器又不会出现这种问题,所以很郁闷但又无能为力,我也是最近才知道原来UC浏览器有开发者版本哦;

如果你希望在源代码中搜索要怎么办呢?在页面已经加载的文件中搜寻一个特定的字符串,快捷键是Ctrl

正确的使用方式

(1)进入UC官方网站开发者中心(网站地址),下载Android平台的UC浏览器开发者版,安装到手机中。
(2)PC机一台,并在PC上安装Chrome或Safari(推荐使用Chrome)。支持Chrome15–Chrome21,以及Safari5.1.4以上版本。下载ADB工具到PC中。

![]()

在移动端开发中,开发过程通常是先用chrome的手机浏览器模拟器模拟开发页面在手机浏览器中的显示。但是通常由于浏览器自身的实现方式页面解析方式不一样,往往在模拟器上显示正常的页面,在真是移动端浏览器中显示异常。包括一些事件触发动作也得不到很好的调试。
下边介绍几个月的h5开发总结出来的移动端调试方式:

![xx]()

![]()

本文由澳门三合彩票发布于Web前端,转载请注明出处:现在介绍最后两块功能,chrome 开发技巧

关键词: