【美高梅开户网址】何以在电脑上测试手机网站,Chrome开发者工具不完全指南

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

2015/07/06 · HTML5 ·
Chrome

初稿出处:
卖烧烤夫斯基   

眼前介绍了Chrome开发者工具的超过一半内容工具,现在牵线最后两块功效AuditsConsole面板。

一、Audits

奥迪ts面板会针对当下网页提出若干条优化的提出,这一个提出分为两大类,一类是网络加载性能,另一类是界面性能。首先开下它的主界面。

美高梅开户网址 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开发者技巧

多年来集团要支付网站的移动版,让我准备准备知识,话说自己支付移动网站的经验还真不多,最喜剧的业务就是本人的手机是个经典的BlackBerry,而且公司还不给配手机,那是有多厌恶,不能够,没有手机只可以用电脑模拟了,相办法代替,查了不可胜道素材,尝试了多数方法,上边将这一天的拼命统计下分享给大家,也让我们免去看那么多小说,以下介绍的措施,都是自我亲自测试成功的艺术,测试环境winxp。

 谷歌 Chrome
在日常生活中饰演的角色不只是一个效能强大的网络浏览器,它放到的 DevTools
同样也是网络开发者进行网络支出的重中之重工具。

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

Chrome*

chrome模拟手机总共有四种格局,原理都无异,通过伪装User-Agent,将浏览器模拟成Android设备。以下标星的为引进格局。

  DevTools
在时时刻刻的拓展版本更新,其中有这几个生死攸关的立异细节你可能会错过。在此地罗列了
谷歌(Google) Chrome 最值得关注的七大新风味。


1.新建Chrome迅速格局

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

美高梅开户网址 6

在意user前面是多少个“-”,并且“chrome.exe”与“–user”之间有一个空格。确定之后,打开那些新建的Chrome急迅格局,输入3g.qq.com就可以浏览到像手机里打开一样的页面了。

【美高梅开户网址】何以在电脑上测试手机网站,Chrome开发者工具不完全指南。  开始——Chrome 的 DevTools Experiment

> 作品来有关 [这里]()

2.五次性模拟华为和安卓手机

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

照猫画虎谷歌(谷歌(Google))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"

模仿苹果诺基亚:

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,所以是三回性。

美高梅开户网址 7

越来越多的user-agent请自行检索。

  Chrome
有部分非凡棒的试验性特性,这几个特点在默许情形下都是藏匿和剥夺的。在浏览器地址栏输入chrome://flags/#enable-devtools-experiments可以激活
DevTool Experiment 选项,在激活后重启浏览器。

在Web开发者中,GoogleChrome是采纳最常见的浏览器。六周两回的发布周期和一套强大的不断增添开发功效,使其变成了web开发者必备的工具。你可能早已深谙了它的一些机能,如采用console和debugger在线编辑CSS。在那篇小说中,大家将享受15个推动改良你的支出流程的技巧。

3.装置插件

插件可以很有益切换各个user-agent,很有益,不过可能会稍微影象性能。

User-Agent
Selector地址:

美高梅开户网址 8

 

从上图可以看来,还有为数不少看似的插件,其实效果都大概。

美高梅开户网址 9

## 一、火速切换文件

4:自带模拟器*

开辟chrome开发者工具,按F12(r32版本)1,然后找到右上角的齿轮按钮,打开设置面板,拔取Overrides,勾上Show
‘Emulation’ view in console drawer(在支配台视图中展现“仿真”)。

美高梅开户网址 10

接下来倒闭设置面板,选取Elements面板(非Console就可以),找到右上角打开控制台面板,拔取控制台面板里的Emulation面板,右侧有成百上千取舍,选拔一个点击Emulate就足以了,Reset按钮能复苏到默许状态。

美高梅开户网址 11

开辟仿真后,打开

美高梅开户网址 12

那种方法简单易行好用,而且不须求重启,推荐那种办法。

专注:以上第一种和第三种格局都亟待将全方位开拓的chrome窗口关闭,再打开才能起效果。

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

若果你利用过sublime text,那么您或许不习惯没有Go to
anything这一个意义的遮盖。你会很快意听到chrome开发者成效也有其一功能,当DevTools被打开的时候,按Ctrl+P(cmd+p
on mac),就能便捷搜索和开拓你项目标文本。

Firefox

  1. 立异移动设备模拟器

![xx]()

1.修改user-agent

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

具体方法移步这里:

  在运动装备中度普及的前几天,网站的一个少不了功用就是拓展移动装备的优化。使用
Chrome
浏览器,你能够透过手机模拟器功用调试网站在活动方式的选择,这几个模拟器已经被完全修改并增添了无数新特点。

## 二、在源代码中搜寻

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

不久前的银狐自己丰盛响应式设计效用和3D试图都很棒,打开火狐自己的控制台(非firebug),找到右上角的响应式设计按钮。

美高梅开户网址 13

开辟后即切换来响应式设计界面

美高梅开户网址 14

但大家看来打开QQ的站点并未被电动引到QQ的移位页面,那样只对响应式设计的界面起功能,对想QQ那样云端判断,再次回到不一致页面的并不适于,那里即将同盟地点的不二法门,再改下user-agent,即可兑现类似chrome的调剂功能。

美高梅开户网址 15

美高梅开户网址 16

即使您期望在源代码中找找要肿么办呢?在页面已经加载的公文中检索一个一定的字符串,快速键是Ctrl

3.Firefox OS 模拟器

安装的艺术
参考那里:

安装到位后可打开如下界面,可用里面的浏览器打开网站即可,但那种艺术打开的是电脑网站,而不是手机网站,也就是她的user-agent不是手机的,故对响应式界面起效果,对判定user-agent的网站不起作用,访问qq,baidu等回到的都是计算机界面。

美高梅开户网址 17

 

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

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

Opera*

  2. 鼠标的复选

![]()

1.修改user-agent

和chrome和firefox类似,可机关设置插件,自opera12之后,opera改用webkit内核,故可安装chrome的插件,也可活动在opera的营业所中找寻插件

User Agent
Changer下载: 

  你想拥有在一个源文件里还要选用编辑三个分歧主题的效率?Chrome
现在扶助鼠标的复选。使用 Ctrl + 点击或者 Cmd+ 点击可以一次性接纳多少个。

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

2.Opera Mobile Emulator + dragonfly*

下载适合自己的本子,安装落成会开如下界面:

美高梅开户网址 18

左手选取平台,左边选拔参数,选择截至点击启动,如下的几面,用过手机opera的心上人会很熟谙,就是手机opera

美高梅开户网址 19

至于opera mobile emulator的更详细介绍参看作品最终参考资料的相干内容。

但此时,仍旧不得不看而已,无法调节模拟器里的网站,那里要求dragonfly合作以完结调试,由于opera12后换了基础,不可以设置dragonfly了,所有你要求一款opera12的浏览器,和dragonfly的离线包,配置好后实际哪些连接请参考那里

全部安装好后即可兑现在处理器上调节手机网页,如下图所示:

美高梅开户网址 20

opera12下载地址:

dragonfly中文离线包下载地址:

opera mobile
emulator下载地址:

美高梅开户网址 21

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

模拟器*

  3. 范围网络连接

  • L for Mac),然后输入行号,DevTools就会容许你跳转到文件中的任意一行。

1.官方模拟器*

做安卓开发的早晚都精晓安卓模拟器,那是谷歌(谷歌(Google))官方的提供的付出环境,能模拟安卓环境,还可切换各类版本,可下载配置好的环境,然后打开eclipes,直接打开AVDM,穿件一个AVD,然后start,如下图:

美高梅开户网址 22

要等一大会时间,会打开模拟器,和安卓环境一致,打开其中的浏览器测试即可。但自身的浏览器打不开不晓得怎么,郁闷的很啊。

美高梅开户网址 23

 

下载地址:

  现在您可以透过 DevTools 测试在不相同连接下网站的响应和总体性。在
DevTools 中,点击 Esc 启动 Console Drawer 然后采用Emulation。在网络选项上,拔取范围网络连接的速度类型,然后您就足以见见网站在实施选定的快慢的意况下的突显了。

![]()

2.bluestacks

那也是一款模拟器,可自行检索,本人安装后电脑就卡死了,可能本身的电脑配置不可以吗,看介绍依然不错的。

美高梅开户网址 24

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

美高梅开户网址 ,在线测试

在线只好测试界面的视觉效果,不可能调节,但也是很不错的。

  4. 脱机方式

## 四、在控制台拔取元素

1.Mobile Emulator*

相当科学,速度也很快,界面很简短,扶助多种平台。

http://emulator.mobilewebsitesubmit.com/

美高梅开户网址 25

  谷歌(Google) Chrome
现在净增了脱机格局,它同意你在尚未网络连接的景色下开辟网站。即便你在拓展网络支出,想要用户在平昔不网络的图景下也能开拓网站,那么那的确是一个很有用的机能。通过在浏览器地址栏输入chrome://flags/#enable-offline-mode,启用“激活离线缓存格局”能够拉开离线方式。

DevTools控制台协理部分变量和函数来选取DOM元素:

2.opera mini simulator

内需java环境接济,单一平台,opera出品,速度很快。

美高梅开户网址 26

美高梅开户网址 27

$()–document.querySelector()的简写,再次来到第四个和css拔取器匹配的要素。例如$(‘div’)再次回到那几个页面中第三个div元素

3.webpage mobile

说实话弄了半天也没弄出来,大大的鄙视下啊,不过能测试的阳台很完善。

  不要遗忘重启 Chrome 浏览器使设置生效。

$$()–document.querySelectorAll()的简写,重临一个和css选用器匹配的元素数组。

总结

上述列出了多种方法,各有利弊,希望大家接纳适合自己的方法,本人推荐chrome自带模拟器和opera
mobile emulator +
dragonfly的法子。因为这三种方法,接近真是手机环境,又能调节css和js。

当然文中没有涉及的还有最好的章程就是你有一台手机,那就太好了,协作远程调试,是最最美好的艺术。

  5. 可将 HTML 拖放到编辑器

$0-$4–依次再次回到四个近期你在要素面板采纳过的DOM元素的历史记录,$0是风靡的记录,以此类推。

推荐

Q群 GitHub家园 225932282 git/github知识共享,经验调换,开源项目,资料下载,帐号互粉
欢迎加入美高梅开户网址 28

  有时你须要复制你的 HTML
元素到编辑器。取代手动复制和粘贴到编辑器,现在你可以进一步便民地拖动
DOM(文本对象模型)并将其放置进编辑器内想要的职位。

![]()

参考资料

*Chrome模拟手机浏览器(iOS/Android)的三种方法,亲测无误!:

 用谷歌(谷歌(Google))浏览器来当手机模拟器:

*关于手机网站测试的题目:

何以firefox模拟手机访问手机网站:

*Firefox OS
模拟器:

*Opera Mobile Emulator for
desktop:

设置 Opera Dragonfly
为离线版或实验版的主意:

*整治:手机端网页调试方案:

*移步终端开发必备知识:

 

美高梅开户网址 29

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

  近来,你不得不拖动一个元素,而且它的子元素不会被一并拖动过来。那上头的短处或者会在随后的本子里获得改良。

## 五、使用三个插入符举行抉择

  6. CSS 审核

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

  现在您可以对您的 CSS 进行复核,比如检查没有在 web
页面使用的不行的体制规则。在“奥迪(Audi)ts”(审核)选项,点击“Run”(运行)按钮,你将会看出一个脚下在该页面没有行使到的类/选拔器的列表,如下图所示:

![]()

美高梅开户网址 30

## 六、保存记录

  7. 增加 SourceMap

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

  使用 SourceMap,你可以观望未创制或未编译的 CSS 或 JavaScript
(JS)版本。此意义对于那个在撰文作风或者脚本语言上利用 Sass、 LESS 或者
CoffeeScript 作为预处理器的开发者来说是充足实用的。启用
SourceMap,你可以透过某行某列的切切实实数字找到变化的 JS 或 CSS
的代码地点。最新版本的 Chrome 允许你手动添加 SourceMap。

![]()

美高梅开户网址 31

## 七、优质打印

  要落成那一点的话,首先你要力保处于源面板,接着打开一个文本,在那将来右键单击并选拔Add Source Map. 添加到 .map 文件。

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

![]()

## 八、设备形式

对此开发移动自己页面,DevTools包涵了一个不胜强劲的情势,这几个谷歌录像介绍了其主要特色,如调整显示器尺寸、触摸仿真和效仿糟糕的网络连接。

![]()

## 九、设备传感仿真

装备方式的另一个很酷的机能是模仿移动装备的传感器,例如LED显示器和加速计。你甚至可以恶搞你的地理地方。那几个成效位于元素标签的最底层,点击“show
drawer”按钮,就可看见Emulation标签 –> Sensors.

![]()

## 十、颜色采纳器

当在体制编辑中接纳了一个颜料属性时,你可以点击颜色预览,就会弹出一个颜色选用器。当选拔器开启时,要是你停留在页面,鼠标指针会成为一个放大镜,让您去挑选像素精度的颜色。

![]()

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

DevTools有一个得以里丑捧心CSS状态的作用,例如元素的hover和focus,可以很简单的更动元素样式。在CSS编辑器中得以采取那么些效果

![]()

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

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

![]()

## 十三、选拔下一个至极项

当在Sources标签下编制文件时,按下Ctrl + D (Cmd + D)
,当前选中的单词的下一个良好也会被选中,有利于你同时对它们举办编制。

![]()

## 十四、改变颜色格式

在颜色预览成效使用火速键Shift +
Click,可以在rgba、hsl和hexadecimal来回切换颜色的格式

![]()

## 十五、通过workspaces来编排本地 文件

Workspaces是Chrome
DevTools的一个无敌功能,那使DevTools变成了一个真正的IDE。Workspaces会将Sources选项卡中的公文和当地品种中的文件举办匹配,所以您可以一向编辑和封存,而无需复制/粘贴外部改变的文本到编辑器。为了陈设Workspaces,只需打开Sources选项,然后右击左侧面板的其它一个地点,拔取Add
Folder To Worskpace,或者只是把您的全方位工程文件夹拖放入Developer
Tool。现在,无论在哪一个文件夹,被选中的公文夹,包罗其子目录和具备文件都足以被编辑。为了让Workspaces更高速,你可以将页面中用到的文本映射到相应的文本夹,允许在线编辑和概括的保留。

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

常常景况大家调试移动端页面最常用的措施就是:切换pc端浏览器的userAgent来模拟手机或其余活动装备调试页面
然后用手机打开要调节的页面 刷新页面查看调试结果,可是那就存在多个问题
在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新
那怎么能达标在pc端修改代码
在手机上直接寓目修改结果那样的所见即所得的功用呢
chrome做到了。最关键的是可以调剂webapp,假设您是原生app,或者是混合app就相当。

– 1、首先PC 上的chrome 是必备的

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

– 3、在你的地方栏 输入chrome://inspect 你就会映入眼帘下边的界面 (在Discover
USB devices 打勾),

**专注假如你是率先次打开 chrome://inspect 记得要翻墙,因为chrome
是google的,你懂的,如若你没有工具请点击[这里](

![]()

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

![]()

发表评论

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

网站地图xml地图