移动WebApp利用Chrome浏览器进行调试

详细的请看这个(HBuilder是我长期使用,而且值得支持的国内前端开发编辑器)

http://ask.dcloud.net.cn/article/151

http://ask.dcloud.net.cn/article/69

对于上面教程要注意的问题:

1,不需要考虑run in device问题,因为他们的软件设计改变了。

2,你必须要新建一个“移动App”,我这里的是h5+。

我主要是分析我遇到的问题:

(这几天,我会把一整套上传百度云盘,如果可以的话,然后共享)

共享的文件可以让你不需要下载那烦人的SDK的安卓4.4.2版本,因为要FQ,所以速度会很慢。

同时,我用的软件是JDK8,SDK 23的版本。 如果出现问题,你自己再重新下载SDK吧。

1,环境搭建

安卓的东西肯定要先搭建JAVA环境的,所以这个你要百度或谷歌搜索下载JDK软件

http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html

可以参考这个环境变量的配置。

2,Intel HAXM  

我安装这个的时候发现:SDK下载是没有这个东西的,然后就去官方下载了,再然后我就出现错误了:

提示的是:Intel Virtualization Technology (VT-X) 没开启,所以就算你安装了SDK,JDK这些也没用。

解决方法:百度下你自己的电脑如何进入bios里面  Intel Virtualization Technology (VT-X)设置成Enable 。

3,创建模拟器

记得在SD card那里设置好2G 哦,相对来说,你的模拟器设置成跟平常手机的内存和SD card差不多一样的话,以后就好调试了。

4,DevTools

模拟器搭建成功后,记得在里面找这个DevTools,然后选择USB 调试(USB Debugging),记得打勾就行。

5,inspect 该注意的问题

在Chrome地址栏,输入“about:inspect”或通过“菜单”->“工具”->“检查设备”打开设备检查页面:

一般情况下,你会发现是空白的,原因是谷歌服务(国内屏蔽了)所以你要准备好FQ,同时一般情况下,FQ只需要一次就够了,因为会有缓存。

成功实现手机web应用利用Chrome浏览器进行页面调试,这样你就可以用在PC调试的方法来进行手机应用调试了。

花了一天时间来解决这个问题,问题解决了还是值得的。

时间: 2024-10-12 13:39:20

移动WebApp利用Chrome浏览器进行调试的相关文章

利用 Chrome 浏览器来模拟手势

现在移动端的应用可谓是越来越火爆了,随着 HTML5 和 CSS3 的诞生,那么移动端的网页也越来越普遍了,那么有时候开发人员制作移动网页的时候,有时候要模拟手机的手势来测试自己写的程序代码,却苦苦寻求不到自己合适的模拟器.那么在这里我将介绍一种谷歌触屏模拟器的插件,让开发者更好的开发自己的手机端的网页.   操作一: 按下键盘按键 F12 调出控制台:   操作二: 操作三: 此时放在网页的任意处如果出现一个黑色的小圆点,那么调用成功,此时你就可以模拟你的手指进行操作.   利用 Chrome

利用chrome浏览器调试js断点的2点心得

1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下,OK!恭喜你的处女断点打上了,哈哈~~ 2.断点怎么打才合适? 打断点操作很简单,核心的

超完整的Chrome浏览器客户端调试大全

引言 “工欲善其事,必先利其器” 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个灵感要来源于之前我想买化妆品时,店里的海报标语,由此联想到,如果你想在某个事情上做好,并且做的专业,那么你一定要把你的工具用好,这样才能事半功倍,我见过很多师兄师姐,写了很多代码,能够很快的完成工作,能够处理很多复杂的业务逻辑,但是对于浏览器的调试掌握的并不全面和深入,说说本人吧,我的编程调试起源于

chrome 浏览器 远程调试 手机网站

调试前 请做好准备工作: 安卓手机 chrome浏览器 手机与pc连接 可以进行usb调试 例子:看如何调试 腾讯网 在手机上用 chrome 打开腾讯网 pc端 打开chrome 浏览器 输入 chrome://inspect/ 就可以看到 如果你觉得这个麻烦 记不住的话 可以采用 手动方式 这样就可以看到啦 接着 就点击 就可以看到啦 怎么回事 怎么是空白的 没有出现我们调试PC端的那样 关于出现这个原因: 针对 chrome 的东西 国人都知道要翻墙.出现这个有的显示不用翻墙也可以 有的必

web移动端和PC端利用chrome同步开发调试

利用chrome可以同步移动端和PC端的web开发调试,前提是,Android系统版本必须4.0+,而且必须用chrome,或者Android 4.4系统版本以上的原生app里面的webview才可以. 由于Android 4.4的原生app webview 的调试暂时还比较少,所以,这里简单说一下chrome下的调试. 1.移动设备和PC设备必须安装了chrome 32以上的版本,移动设备必须为Android4.0+: 2.移动设备进入设置功能,设置为开发模式: 3.PC端chrome打开ch

Chrome浏览器端调试JavaScript

1. 一个超级简单的html文件拉入chrome浏览器 2. 右键-->检查 3. 点击Sources 4. html的12行加个断点 5. 刷新页面,点开Console面板,输入变量num,我们看到了此时num的值 6. 右侧一排工具,可以前进跳过,取消断点等等

利用Chrome浏览器的开发者工具截取整个页面

①打开Chrome浏览器的开发者工具: 快捷键: command + Alt + I (Mac). Ctrl + shift + I (Windows) 或者: 鼠标右键 -> 弹出菜单中选择 "检查" 选项. ②打开命令行: 快捷键:command + shift + P (Mac).Ctrl + shift + P (Windows) ③输入命令:Capture full size screenshot 确定后,截图将会自动下载. 原文地址:https://www.cnblo

chrome浏览器远程调试移动端Web页面

1.Android系统的移动设备 a.开启 USB调试模式:具体设置请自行百度: b.用USB数据线连接手机设备,并同意这台计算机进行USB调试: c.在浏览器地址栏输入chrome://inspect 或者about:inspec:可以显示出设备的名称,在下图中 '2013023' 即为设备名称: d.在浏览器中随意打开一个页面或者在app中打开一个webview的页面,出现如下图所示 点击 inspect 即可调试 提示:再调试webview里的页面的时候,若无法显示出webview中打开页

用Chrome浏览器远程调试APP内的网页,其实是支持哒

Google开了一个专题网页,这里有详细的说明,先把链接放这里.旧版的使用说明在这里.