[1]移动端页面调试之“weinre大法”
2015-12-02 08:42
295 查看
前言
这个也是从早读课转载的。如有侵权请联系我马上下架。
正文从这开始~~
移动端页面调试一般分两步。第一步我们需要把本地(pc端)写的页面效果展现在移动端,一个很方便的办法是用 fiddler 作为代理,具体可以参考 如何用 fiddler 代理调试本地手机页面,这样我们就能在自己的手机上看到真机效果,有时还可以用 alert 调试一些 js;当然,有时仅仅展现样式还不够,我们希望能像 chrome 面板或者 firebug 一样查看元素的 css 样式,甚至可以在控制台看到 js 的 console 输出,UC浏览器开发者版可以方便地做到这点,具体可以参考 如何使用 UC浏览器开发者版进行移动端调试。
接下来我们来隆重介绍下兼容所有浏览器的 "weinre大法" (html & css 调试利器,无法调试 js)
1、weinre 是什么鬼
Weinre 是 Web Inspector Remote 的缩写(远程 web 检查器),它的作用就是相当于 chrome 的审查元素面板(Elements)一样,界面和用法也基本一样,无非不同的是:weinre 适合在移动端页面调试,比如手机访问页面的时候,我们可以使用 chrome 浏览器查看页面的 html 元素和 css 代码,我们可以对此进行更改,然后在手机端不需要刷新,立即可以看到效果。看到这里您或许已经明白了,没错,weinre 是调试 html 和 css 的利器,对于 js 的调试却爱莫能助了。
2、Node.js & weinre 安装
当然首先得安装 weinre。以前安装要依靠 java 环境(jdk),很麻烦,现在有了 Node.js 一下子方便许多。我们先安装 Node.js(参考 Node.js入门),安装完后进入 Node.js 的安装目录,进行 weinre 的安装。
weinre 安装完后,需要在本地开启一个监听服务器。我们先获取自己的 ip(ipconfig),比如我的 ip 为 192.168.1.101(这里要注意一点,如果 pc 端连的是局域网的话用局域网,如果不是则优先使用 pc 端非局域网 ip)。我们在命令行敲下如下命令即可开启服务:
3、访问 weinre
服务已经开启,我们赶紧在浏览器上访问服务地址吧!
在打开的页面中我们找到 Target Script 模块,将下图中这段 js 引入到需要调试的 html 文件中。
比如我在本地写了如下代码,将 js 引入后:
我们在移动端先任意找个浏览器打开该页面(fidder 代理),然后在 pc 端点击刚才打开页面最上面的链接(下图所示)
页面便会跳转至调试页面,这时就可以愉快地调试 css 了!
后语
利用这个工具,结合平时调试demo所用的工具组成一个黄金搭档工具:charles+browserSync+weinre。
你平时都用什么工具调试呢?
关于本文
作者:@韩子迟
原文链接:http://www.cnblogs.com/zichi/p/5001767.html
这个也是从早读课转载的。如有侵权请联系我马上下架。
正文从这开始~~
移动端页面调试一般分两步。第一步我们需要把本地(pc端)写的页面效果展现在移动端,一个很方便的办法是用 fiddler 作为代理,具体可以参考 如何用 fiddler 代理调试本地手机页面,这样我们就能在自己的手机上看到真机效果,有时还可以用 alert 调试一些 js;当然,有时仅仅展现样式还不够,我们希望能像 chrome 面板或者 firebug 一样查看元素的 css 样式,甚至可以在控制台看到 js 的 console 输出,UC浏览器开发者版可以方便地做到这点,具体可以参考 如何使用 UC浏览器开发者版进行移动端调试。
接下来我们来隆重介绍下兼容所有浏览器的 "weinre大法" (html & css 调试利器,无法调试 js)
1、weinre 是什么鬼
Weinre 是 Web Inspector Remote 的缩写(远程 web 检查器),它的作用就是相当于 chrome 的审查元素面板(Elements)一样,界面和用法也基本一样,无非不同的是:weinre 适合在移动端页面调试,比如手机访问页面的时候,我们可以使用 chrome 浏览器查看页面的 html 元素和 css 代码,我们可以对此进行更改,然后在手机端不需要刷新,立即可以看到效果。看到这里您或许已经明白了,没错,weinre 是调试 html 和 css 的利器,对于 js 的调试却爱莫能助了。
2、Node.js & weinre 安装
当然首先得安装 weinre。以前安装要依靠 java 环境(jdk),很麻烦,现在有了 Node.js 一下子方便许多。我们先安装 Node.js(参考 Node.js入门),安装完后进入 Node.js 的安装目录,进行 weinre 的安装。
weinre 安装完后,需要在本地开启一个监听服务器。我们先获取自己的 ip(ipconfig),比如我的 ip 为 192.168.1.101(这里要注意一点,如果 pc 端连的是局域网的话用局域网,如果不是则优先使用 pc 端非局域网 ip)。我们在命令行敲下如下命令即可开启服务:
3、访问 weinre
服务已经开启,我们赶紧在浏览器上访问服务地址吧!
在打开的页面中我们找到 Target Script 模块,将下图中这段 js 引入到需要调试的 html 文件中。
比如我在本地写了如下代码,将 js 引入后:
我们在移动端先任意找个浏览器打开该页面(fidder 代理),然后在 pc 端点击刚才打开页面最上面的链接(下图所示)
页面便会跳转至调试页面,这时就可以愉快地调试 css 了!
后语
利用这个工具,结合平时调试demo所用的工具组成一个黄金搭档工具:charles+browserSync+weinre。
你平时都用什么工具调试呢?
关于本文
作者:@韩子迟
原文链接:http://www.cnblogs.com/zichi/p/5001767.html
相关文章推荐
- Android 学习笔记---获取RadioGroup的选定值
- 如何设计一个 iOS 控件?(iOS 控件完全解析)
- Android哈哈镜实现源码
- iOS App上线流程
- 利用webview加载帧动画
- android CheckBox使用和状态获得
- 【cocos2d-x 3D游戏开发】1: 2D基础回顾---触摸事件(2.x)
- 简谈微信公众服务号的客服接口
- GCD详解及实现- 常用API
- JavaScript使用DeviceOne开发实战(三)仿微信应用
- Swift-控制流
- Objecetive-C PK Swift
- Swift - 重要知识点总结
- Delphi组件开发-在窗体标题栏添加按钮(使用MakeObjectInstance(NewWndProc),并处理好多消息)
- cocos2dx3.x绘制自己的node
- android中setClickable,setEnabled,setFocusable的含义及区别
- android学习笔记:Intent,Intent Filter
- cocos2d-x札记 (一)----HelloWorld浅析
- ios7 真机调试 设置 bitcode
- Android实现推送方式解决方案