新开发的网页需要在手机或是模拟机上运行测试,

可以借助 Chrome提供的手机网页预览程序进行简单调试。查看 制作的网页是否能够适合各种手机型号使用。

下面所以下如何使用Chrome调试多类型手机网页。

首先 下载Chrome 浏览器:http://rj.baidu.com/soft/detail/14744.html?ald

在你要调试的网页或是本地页面中。按F12 打开调试器。(即开发者模式)

Chrome V35 版本中的开发者工具分为 8 个大模块,每个模块及其主要功能为:

  • Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
  • Network 标签页:用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等。
  • Source 标签页:用于查看和调试当前页面所加载的脚本的源文件。
  • TimeLine 标签页: 用于查看脚本的执行时间、页面元素渲染时间等信息。
  • Profiles 标签页:用于查看 CPU 执行时间与内存占用等信息。
  • Resource 标签页:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等。
  • Audits 标签页:用于优化前端页面,加速网页加载速度等。
  • Console 标签页:用于显示脚本中所输出的调试信息,或运行测试脚本等。

//==============================================

下面来分别说下每个Tab的作用。

Elements标签页

这个就是查看、编辑页面上的元素,包括HTML和CSS:

你可以直接在某个元素上双击修改元素的属性,或者你点右键选"Edit as
Html"直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现。

Resources标签页

可以查看到请求的资源情况,包括CSS、JS、图片等的内容,同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除。

Network标签页

分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。

注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示的哦。

点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求情况:HTTP请求头、HTTP响应头、HTTP返回的内容等信息

Timeline标签页

注意这个Timeline的标签页不是指网络请求的时间响应情况哦(这个在Network标签页里查看),

这个Timeline指的JS执行时间、页面元素渲染时间。

Profiles标签页

这个主要是做性能优化的,包括查看CPU执行时间与内存占用

Audits标签页

这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow)

点击run按钮,就可以开始分析页面,分析完了就可以看到分析结果了.

Console标签页

就是Javascript控制台了:

这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。  

例如查看console都有哪些方法和属性,可以直接在Console中输入"console"并执行

Chrome除了简洁、快速,现在的Chrome的插件也非常的丰富了。

对于web开发者来说,Chrome对于HTML5、CSS3等一些新标准的支 持也是比较完善的,

而且Chrome的开发者工具,个人认为真的非常好用。

手机网页调试利器: Chrome的更多相关文章

  1. 移动端H5测试调试利器 chrome://inspect/#devices

    使用 chrome://inspect/#devices,可以使安卓手机里的WebView也能和chrome一样审查元素,调试和测试移动端H5页面. 我使用的是三星S6 (该功能支持安卓系统4.4及以 ...

  2. 手机H5 web调试利器——WEINRE (WEb INspector REmote)

    手机H5 web调试利器--WEINRE (WEb INspector REmote) 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的ch ...

  3. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

  4. vConsole--针对手机网页的前端 console 调试面板。

    一个针对手机网页的前端 console 调试面板. 简介 vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作. 手机预览 http://we ...

  5. 手机前端开发调试利器 – vConsole

    我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己 ...

  6. 手机网站调试神器之chrome控制台

    现在真是一个信息化的时代,每个人手里都拿着一款智能机,上班下班走路坐车之余都会玩玩手机,上上网.于是作为广大网站媒体来说,争抢手机市场无疑是刻不容缓.对于我们Web前端工程师来说,了解并掌握手机编程的 ...

  7. 前端调试利器——BrowserSync

    此处记录一下踩过的坑 之前看的这个地址:http://www.browsersync.cn/ 也就是 BrowserSync的官网上面关于代理服务器的例子不管怎么试都不行 请看下例子 browser- ...

  8. [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞

    目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...

  9. 【测试工具】http协议调试利器fiddler使用教程

    转自:http协议调试利器fiddler使用教程http://bbs.phpchina.com/thread-207418-1-1.html Fiddler真乃神器!它和市面上常见的很多web调试器. ...

随机推荐

  1. win7 32 bit VS2012 OpenCV3.0配置

    今天看CPP基础,想起来之前在vs2012配置opencv3未成功,就忍不住再次配置一... 环境:win7 32bit vs2012 opencv3.0 主要参考这几篇博文:1,2,3 上面的博文已 ...

  2. oracle xmltype导入并解析Excel数据 (五)中间表数据入库

    此处给出例子,具体根据业务需求 create or replace procedure P_CART_Sheet1(p_id in NUMBER) is--车辆管理功能v_str varchar2(4 ...

  3. 关于AE

    1.下方时间轴左边上角时间,按住ctrl点击,可切换时间与帧数 2.新建comp,ctrl+n 3.特效控制面板,F3 4.时间轴左边图层各个属性快捷键:移动,p:旋转,r:缩放,s:轴心,a:不透明 ...

  4. "****" is not translated in zh, zh_CN.的解决方法

    最近在开发一个app,要用到静默安装等一些小技术,但是引发了问题如下: 在Android SDK Tool r19之后, Export的时候遇到xxx is not translated in yyy ...

  5. Android Handler 最佳的理解资料

  6. Linux系统启动错误 contains a file system with errors, check forced解决方法

    /dev/sda1 contains a file system with errors, check forced./dev/sda1: Inodes that were part of a cor ...

  7. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  8. RealProxy实现AOP编程(2)

    稍微变化一下!注意区别. Program.cs class Program { static void Main(string[] args) { User user = " }; var ...

  9. C++ 虚函数,纯虚函数的一些问题

    #include <iostream> using namespace std; #define cendl cout << endl; class AA{//这是一个纯虚函数 ...

  10. 新冲刺Sprint3(第四天)

    一.Sprint介绍 实现了SQLite数据库记录自动登录.注销功能 真机测试效果图:     二.Sprint周期 看板: 燃尽图: