移动端调试html页面的方法

weinre这种方法。

1.首先你要安装nodejs,要装一个低版本的,最新版本的装weinre会装不上。这里给个下载地址

 https://nodejs.org/dist/v0.10.20/node-v0.10.20-x86.msi

2.然后npm命令

  npm install -g weinre

3.运行wernre

  weinre --httpPort 8081 --bounHost -all-

  在浏览器输入上面的 localhost:8081

4.你会看到这样的一个界面

  复制红线框里面的一段 内容,插入到你要调试的html页面中。

5.接下来找到你weinre的安装目录,

  如:

新建一个 www 目录,

    将调试页面,放在这个www目录里面,

  手机访问:localhost:8081/www/index.html

另一种调试方法:

  安装anywhere,这种方法比上面简单,而且比上面方便。

  npm install anywhere -g

  安装好后,cmd 命令 进入你要调试html页面的目录,运行 anywhere

				
时间: 2024-11-13 06:56:42

移动端调试html页面的方法的相关文章

移动端调试方法

移动端的页面我们要想调试最常用的应该属于是chrome的机型的模拟了,但是如果遇到一些只有在某种机型上面才能看到的bug的话就不好调试了. iphone端调试 首先苹果端是可以调试的,苹果模拟器和苹果浏览器是同一套系统,可以无缝对接调试,Xcode有苹果模拟器,打开模拟器,再打开safari浏览器找到开发下来就能找到这个页面的源码,前提是这个页面是web做的. 安卓端的调试 安卓也是可以的利用chrome,只是需要多点流程, 需要准备 1,pc安装最新chrome. 2,安卓手机(系统需要4.1

总结下移动端调试的一些方法

说起网站调试,pc页面和h5页面,假如电脑上能够重现的,都不在话下,调试起来都蛮简单.仅仅需要fiddler一个抓包工具,把线上压缩代码替换成本地无压缩代码就可以了.具体步骤我后面可以详细介绍.但是,仅仅是某款手机重现,其他手机没有问题的情况下如何调试?hybrid页面如何调试呢?这篇文章简单总结下我常用的调试方法. 一.chrome的inspect调试方法 这个调试仅仅是针对安卓系统,可以调试hybrid,也可以调试h5,但是IOS系统就无能为力了.我很喜欢用这种方式调试android手机.用

python--前端之CSS(css页面引入方法、选择器之基本选择器、组合选择器)

CSS产生背景: 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表. 有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁. CSS基本语法及页面引用 CSS基本语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; pr

使用weinre调试手机页面

Weinre(Web Inspector Remote),是一种远程调试工具.功能与Firebug及chrome调试器类似,可以帮助我们即时更改页面元素.样式,调试JS等. 工作原理 weinre由三部分组成 1. debug server 核心组件,运行在服务端,负责与另外两部分通信. 2.debug client webkit核浏览器,与debug server通信.展现调试界面,允许你修改dom,查看网络信息等. 3. debug target.  待调试的页面.你需要在页面中嵌入一小段j

UC浏览器开发者版调试手机页面

1 关于RI 目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试.手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实. 因此,我们使用技术将手机网页调试信息分离,实现一种能在大屏幕.高配置PC上来调试小屏幕.低配置的手机浏览器访问的网页的开发工具——RemoteInspector(简称RI). 1.1主要功能 Android平台UC浏览器开发者版,主要支持以下功能: DOM查看和修改 JavaScript调试.CSS调试 网络状态查看 资源文件查看 Console控制台

移动端调试

最近两年无线端的html页面很火,博主最近也做了几个手机项目.相信做过的人都会碰到调试这个棘手的问题.一是没有相应的设备,所以很多人使用虚拟机调试,二是没有较好的调试工具,没法实时得到调试信息.现在将我的一些调试经验总结一下: 本文介绍了无线端调试的四种方式,分别是: charles设置代理  fiddler设置代理 MTL 工具使用 weinre (查看dom元素,查看console.log输出的数据) (如果大家还有其它的调试方法,欢迎补充) 一.charles设置代理  charles 一

父页面调用子页面的方法

其实一句话就可以调用子页面的方法了,何必整得那么纠结是吧,感谢java大神: var dsjg1=document.getElementById("div-dsjg").contentWindow.checkEmpty(); 我的子页面有一个方法: 子页面js: function checkEmpty(){ alert("我是儿子!"); } 子页面body内容省略. 父页面: <iframe id="div-dsjg" src="

Chrome调试手机页面

新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页. 首先 下载Chrome 浏览器. 在你要调试的网页或是本地页面中.按F12 打开调试器. 工具/原料 Chrome浏览器 方法/步骤 打开 仿真面板.如图所示: 可以在 Device 选择设备. 可以在Screen  设置模拟的屏幕方面的东西,设置分辨率,屏幕尺寸. 可以在

豆瓣移动端风格的css命名方法与学习

在CSS取名相对于刚入门来说是最头疼的事情,往往取一个可读性的名字相对以后的代码风格还是很重要的. 在配合团队方面一个好的类名可以帮助同事来理解,增加团队之间的效率有着很大的意义. 豆瓣的前段相对其他网站来说还是比较文艺清爽的,所以很值得去向他们团队学习,学习的地方很多,先来取名把. 在最外面的一个<div class="ck-root">.....</div>首先内容先用一个大的div盒子包起来, <div class="ck-root&quo