2757com 26

在真是移动端浏览器中显示异常,2757comchrome 开发技巧

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

2015/07/06 · HTML5 ·
Chrome

原文出处:
卖烧烤夫斯基   

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

一、Audits

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

2757com 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放入头部:

2757com 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视图角度。把鼠标放上去直接旋转模型。这个功能暂时没发现有啥卵用。

2757com 3

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

2757com 4

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

三、结束语

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

1 赞 8 收藏
评论

2757com 5

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

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

最近公司要开发网站的移动版,让我准备准备知识,话说本人开发移动网站的经验还真不多,最悲剧的事情就是我的手机是个经典的诺基亚,而且公司还不给配手机,这是有多讨厌,没办法,没有手机只能用电脑模拟了,相办法代替,查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp。

 Google Chrome
在日常生活中扮演的角色不只是一个功能强大的网络浏览器,它内置的 DevTools
同样也是网络开发者进行网络开发的重要工具。

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

1.log方式

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

Chrome*

chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备。以下标星的为推荐方法。

  DevTools
在不断的进行版本更新,其中有很多重要的更新细节你可能会错过。在这里罗列了
Google Chrome 最值得关注的七大新特性。


2.chrome模拟器调试

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

1.新建Chrome快捷方式

右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择“复制”,复制一个图标副本到桌面。右击该副本,选择“属性”,打开相应的对话框,在“目标”文本框的字符后面添加以下语句:“–user-agent=”Android””,如下图:

2757com 6

注意user前面是两个“-”,并且“chrome.exe”与“–user”之间有一个空格。确定之后,打开这个新建的Chrome快捷方式,输入3g.qq.com就可以浏览到像手机里打开一样的页面了。

  开始——Chrome 的 DevTools Experiment

> 文章来至于 [这里]()

正确的打开方式

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

2757com 7

chrome开发者工具

2.一次性模拟iPhone和安卓手机

开始–运行中输入以下命令,启动浏览器:

模拟谷歌Android:

chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

模拟苹果iPhone:

chrome.exe --user-agent="Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10"

这种方法仅供特殊情况下使用,因为重启Chrome将不能恢复正常User-Agent,所以是一次性。

2757com 8

更多的user-agent请自行搜索。

  Chrome
有一些非常棒的实验性特性,这些特性在默认情况下都是隐藏和禁用的。在浏览器地址栏输入chrome://flags/#enable-devtools-experiments可以激活
DevTool Experiment 选项,在激活后重启浏览器。

在Web开发者中,Google
Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能,如使用console和debugger在线编辑CSS。在这篇文章中,我们将分享15个有助于改进你的开发流程的技巧。

3.Weinre

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

3.安装插件

插件可以很方便切换各种user-agent,很方便,但是可能会稍微影像性能。

User-Agent
Selector地址:

2757com 9

 

从上图可以看到,还有很多类似的插件,其实功能都大同小异。

2757com 10

## 一、快速切换文件

weinre安装使用

4:自带模拟器*

打开chrome开发者工具,按F12(r32版本)1,然后找到右上角的齿轮按钮,打开设置面板,选择Overrides,勾上Show
‘Emulation’ view in console drawer(在控制台视图中显示“仿真”)。

2757com 11

然后关闭设置面板,选择Elements面板(非Console就可以),找到右上角打开控制台面板,选择控制台面板里的Emulation面板,右边有很多选项,选择一个点击Emulate就可以了,Reset按钮能恢复到默认状态。

2757com 12

打开仿真后,打开

2757com 13

这种方法简单好用,而且不需要重启,推荐这种方法。

注意:以上第一种和第二种方法都需要将全部打开的chrome窗口关闭,再打开才能起作用。

  重启后,启动 DevTools,点击齿轮图标移的右上角 DevTools
面板,你可以在左边栏看到“Experiment(实验)”
选项,在这里你可以选择任何一个想要激活的特性。

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

(1)安装

sudo npm -g install weinre

Firefox

  1. 改进移动设备模拟器

![xx]()

(2)启动

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

2757com 14

weinre启动成功

1.修改user-agent

和chrome一样安装插件修改user-agent的方法

具体方法移步这里:

  在移动设备高度普及的今天,网站的一个必备功能就是进行移动设备的优化。使用
Chrome
浏览器,你可以通过手机模拟器功能调试网站在移动模式的应用,这个模拟器已经被完全修改并增加了许多新特性。

## 二、在源代码中搜索

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

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

Example:
<script
src=”;

2.火狐响应式设计+修改user-agent*

最近的火狐自己添加响应式设计功能和3D试图都很棒,打开火狐自己的控制台(非firebug),找到右上角的响应式设计按钮。

2757com 15

打开后即切换到响应式设计界面

2757com 16

但我们看到打开QQ的站点并未被自动引到QQ的移动页面,这样只对响应式设计的界面起作用,对想QQ这样云端判断,返回不同页面的并不适应,这里就要配合上面的方法,再改下user-agent,即可实现类似chrome的调试功能。

2757com 17

2757com 18

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

(4)调试

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

2757com 19

查看weinre中页面访问情况

2757com 20

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

3.Firefox OS 模拟器

安装的方法
参考这里:

安装完成后可打开如下界面,可用里面的浏览器打开网站即可,但这种方法打开的是电脑网站,而不是手机网站,也就是他的user-agent不是手机的,故对响应式界面起作用,对判断user-agent的网站不起作用,访问qq,baidu等返回的都是电脑界面。

2757com 21

 

  启动 DevTools 并点击移动设备图标然后点击
loop/search(循环/搜索),打开移动设备模拟器,截图如上所示。正如你所看到的,上面的模拟器已经配备了标尺,因此你可以清楚看到网站视窗的尺寸大小。

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

4.chrome移动端远程调试

Opera*

  2. 鼠标的复选

![]()

使用步骤:

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

2757com 22

chrome远程调试

1.修改user-agent

和chrome和firefox类似,可自行安装插件,自opera12之后,opera改用webkit内核,故可安装chrome的插件,也可自行在opera的商店中搜索插件

User Agent
Changer下载: 

  你想拥有在一个源文件里同时选择编辑多个不同主题的功能?Chrome
现在支持鼠标的复选。使用 Ctrl + 点击或者 Cmd+ 点击可以一次性选择多个。

## 三、快速跳转到指定行

5、微信web开发者工具

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

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

2.Opera Mobile Emulator + dragonfly*

下载适合自己的版本,安装完毕会开如下界面:

2757com 23

左侧选择平台,右侧选择参数,选择完毕点击启动,如下的几面,用过手机opera的朋友会很熟悉,就是手机opera

2757com 24

关于opera mobile emulator的更详细介绍参看文章末尾参考资料的相关内容。

但此时,还是只能看而已,不能调试模拟器里的网站,这里需要dragonfly配合以实现调试,由于opera12后换了内核,不能安装dragonfly了,所有你需要一款opera12的浏览器,和dragonfly的离线包,配置好后具体如何连接请参看这里

全部设置好后即可实现在电脑上调试手机网页,如下图所示:

2757com 25

opera12下载地址:

dragonfly中文离线包下载地址:

opera mobile
emulator下载地址:

2757com 26

发表评论

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