您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版Chrome七大新特色,Chrome开垦者

1010cc时时彩经典版Chrome七大新特色,Chrome开垦者

发布时间:2019-11-17 17:40编辑:1010cc时时彩客户端浏览(76)

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

    2015/07/06 · HTML5 · Chrome

    原文出处: 卖烧烤夫斯基   

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

    一、Audits

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

    1010cc时时彩经典版 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放入头部:

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

    1010cc时时彩经典版 3

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

    1010cc时时彩经典版 4

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

    三、结束语

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

    1 赞 8 收藏 评论

    1010cc时时彩经典版 5

    ## 十、颜色选择器

    weinre安装使用

    1.修改user-agent

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

    具体方法移步这里:

      要做到这一点的话,首先你要确保处于源面板,接着打开一个文件,在那之后右键单击并选择 Add Source Map. 添加到 .map 文件。

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

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

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

    Example:
    <script src=";

    1.修改user-agent

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

    User Agent Changer下载: 

    1010cc时时彩经典版 6

    ![]()

    (1)安装

    sudo npm -g install weinre

    2.Opera Mobile Emulator dragonfly*

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

    1010cc时时彩经典版 7

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

    1010cc时时彩经典版 8

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

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

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

    1010cc时时彩经典版 9

    1010cc时时彩经典版,opera12下载地址:

    dragonfly中文离线包下载地址:

    opera mobile emulator下载地址:

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

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

    (4)调试

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

    1010cc时时彩经典版 10

    查看weinre中页面访问情况

    1010cc时时彩经典版 11

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

    在线测试

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

      7. 增加 SourceMap

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

    主要功能

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

    1.Mobile Emulator*

    非常不错,速度也很快,界面很简洁,支持多种平台。

    http://emulator.mobilewebsitesubmit.com/

    1010cc时时彩经典版 12

      6. CSS 审核

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

    正确的打开方式

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

    1010cc时时彩经典版 13

    chrome开发者工具

    1.官方模拟器*

    做安卓开发的肯定都知道安卓模拟器,这是谷歌官方的提供的开发环境,能模拟安卓环境,还可切换各个版本,可下载配置好的环境,然后打开eclipes,直接打开AVDM,穿件一个AVD,然后start,如下图:

    1010cc时时彩经典版 14

    要等一大会时间,会打开模拟器,和安卓环境一样,打开里面的浏览器测试即可。但我的浏览器打不开不知道为什么,郁闷的很啊。

    1010cc时时彩经典版 15

     

    下载地址:

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

    ## 四、在控制台选择元素

    使用步骤

    参考资料

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

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

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

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

    *Firefox OS 模拟器:

    *Opera Mobile Emulator for desktop:

    设置 Opera Dragonfly 为离线版或实验版的方法:

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

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

     

      现在你可以对你的 CSS 进行审核,比如检查没有在 web 页面使用的无用的样式规则。在“Audits”(审核)选项,点击“Run”(运行)按钮,你将会看到一个目前在该页面没有使用到的类/选择器的列表,如下图所示:

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

    正确的使用方式

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

    Firefox

      4. 脱机模式

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

    2.chrome模拟器调试

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

    模拟器*

    1010cc时时彩经典版 16

    ## 八、设备模式

    使用步骤:

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

    1010cc时时彩经典版 17

    chrome远程调试

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

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

    1010cc时时彩经典版 18

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

    1010cc时时彩经典版 19

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

    1010cc时时彩经典版 20

      使用 SourceMap,你可以看到未创建或未编译的 CSS 或 JavaScript (JS)版本。此功能对于那些在创作风格或者脚本语言上使用 Sass、 LESS 或者 CoffeeScript 作为预处理器的开发者来说是非常有用的。启用 SourceMap,你可以通过某行某列的具体数字找到生成的 JS 或 CSS 的代码位置。最新版本的 Chrome 允许你手动添加 SourceMap。

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

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

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

    1010cc时时彩经典版 21

    微信web开发工具

    3.安装插件

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

    User-Agent Selector地址:

    1010cc时时彩经典版 22

     

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

      1. 改进移动设备模拟器

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

    参考

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

    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,所以是一次性。

    1010cc时时彩经典版 23

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

    1010cc时时彩经典版 24

    ## 十四、改变颜色格式

    4.chrome移动端远程调试

    2.bluestacks

    这也是一款模拟器,可自行搜索,本人安装后电脑就卡死了,可能我的电脑配置不行吧,看介绍还是不错的。

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

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版Chrome七大新特色,Chrome开垦者

    关键词: