当前位置:首页 » 网页前端 » 前端手机调试
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端手机调试

发布时间: 2022-02-07 11:48:24

1. 如何用手机进行本地前端调试

第一步:连接电脑与手机
 
1. 手机打开“开发者选项”
安卓手机进入“设置”—>“关于手机”—> 在“版本号”上点7次(或其他的版本号位置,一个个试肯定有……)
然后“开发者选项”就出现在“设置”里面了。
 
2. 手机打开“USB调试”
进入“开发者选项”—>打开“USB调试”(如果想手机长亮还要打开“不锁定屏幕”)
 
3. 连接并允许调试
用USB数据线将手机与电脑连接—>手机上出现“允许该电脑调试”时点“允许”(可能会晚点出现,先去第二步)
 
第二步:用电脑启动手机浏览
 
1. 打开chrome的inspect
在电脑chrome地址栏中输入chrome://inspect—>勾选“Discover USB devices”
如无意外在Devices中会出现手机型号。
如果没有,再确认下:开发者选项、USB调试、允许该计算机调试
 
2. 手机打开chrome app
在手机中打开chrome,这时电脑的chrome inspect中会出现输网址的地方。
 
3. 测试手机浏览的控制
在电脑chrome inspect输入框中随便输个在线网址,点Open,手机chrome就会打开该页面。用电脑chrome可以控制刷新、关闭,但是用来调试的inspect点开是空白,应该是被墙了。
 
第三步:用手机测试本地页面
 
1. 开启本地服务器
对的,很遗憾手机chrome不能进行静态页面的调试。
所以必须开本地服务器,所幸现在有gulp+webserver,用法这里不讲了。
总之,完成这一点后,你应该在电脑上用 http://localhost 来浏览网页了。
 
2. 电脑chrome开启端口转发
在chrome inspect中点“Port forwarding...”—>把端口和localhost链接输进去(比如8000和localhost:8000)—>勾选“Enable port forwarding”—>Done
 
3. 打开手机浏览localhost
如:输入http://localhost:8000 点Open
这样手机就能打开页面了。

2. js前端调试的几个小技巧

1. debugger;

我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。

需要带有条件的断点吗?你只需要用if语句包围它:

if(somethingHappens){
debugger;
}

但要记住在程序发布前删掉它们。

2. 设置在DOM node发生变化时触发断点

有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源。

谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,叫做“Break on…”,你在DOM节点上右键,就能看到这个菜单项。

断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化,或它的某个子节点有变化发生。

3. Ajax 断点

XHR断点,或Ajax断点,就像它们的名字一样,可以让我们设置一个断点,在特点的Ajax调用发生时触发它们。

当你在调试Web应用的网络传输时,这一招非常的有效。

tumblr_inline_n1s7ceQ08c1r2

4. 移动设备模拟环境

谷歌浏览器里有一些非常有趣的模拟移动设备的工具,帮助我们调试程序在移动设备里的运行情况。

找到它的方法是:按F12,调出开发者工具,然后按ESC键(当前tab不能是Console),你就会看到第二层调试窗口出现,里面的Emulation标签页里有各种模拟设备可选。

当然,这不会就变成了真正的iPhone,只是模拟了iPhone的尺寸,触摸事件和浏览器User Agent值。

tumblr_inline_n1s71kb2NL1r2

5. 使用Audits改进你的网站

YSlow是一个非常棒的工具。谷歌浏览器的开发者工具里也有一个非常类似的工具,叫Audits。

它可快速的审计你的网站,给你提出非常实际有效的优化你的网站的建议和方法。

3. 前端做出来的移动端页面用什么测试

移动端的web页面调试一般可以采取以下三种调试方法:第一,在PC端的浏览器里直接f12调试,一般现在的浏览器都有device mode,调用这个模式浏览器就可以模拟移动端的设备进行调试,目前chrome支持的设备包括苹果、三星、nexus等;
第二,在PC端创建安卓和ios的虚拟机调试,感觉有点复杂,一般web开发很少用这种模式,原生app开发用得比较多;
第三,直接用移动设备测试,将你开发所用的PC和要测试的移动设备连接在同一个局域网下,通过PC搭建一个服务器,这样移动设备就可以通过局域网ip访问你开发的网页看效果了。
通常来说,第一种调试方式方便快捷,能够快速的查看效果,基本上解决90%的调试问题。剩下的问题一般要配合第三种方法,比如不同的系统(安卓、苹果)搭配不同的浏览器(UC、QQ、chrome、Safari)的显示差异问题等等。

4. 怎么在移动端调试web前端

日常开发中,用 Chrome 模拟 UA、屏幕尺寸 和 触摸特性,完成第一阶段的开发和调试。

第二阶段:
iOS 的话,iPhoen 数据线链接 Mac,打开 Safari 就可以直接使用 Mac 的 Safari 调试工具了。

Android 的话,Chrome 也有提供对应的调试工具。

国产浏览器中,UC 在 Android 提供了开发者版本,局域网下直接访问机器的IP + 9998端口即可进入调试环境。

但对于国内开发者而言,最大的问题在于国产浏览器的各种奇怪BUG。
面对这类没有调试工具的浏览器,weinre 也是一个可行的解决方案。

如果只是对JavaScript的异常进行跟踪,自己敲几行代码也可以勉强处理一下。
引入一个外部链接来接收异常信息,借此把异常显示到开发环境中,这样就可以根据异常的信息对 JavaScript 代码进行跟踪和定位。
其中大致的实现原理,是通过对 window.onerror 进行一个全局的异常监听,把捕获到的异常发送到指定的接口。

5. 如何用chrome调试android前端

1. 在pc和android手机上都安装最新版本的chrome
2. 使用usb将手机的PC相连接
3. 手机中打开“设置”->"开发人员选项"->"USB调试"

4. 打开pc侧chrome, 在地址栏中输入chrome://inspect/#devices 选中discover usb devices。可以看到我们的手机设备,

5.在手机侧chrome中访问页面 比如:m.haha.sogou.com 同步的,我们会在pc侧的chrome上看到到手机侧访问的页面,

6. 怎么在移动端调试web前端

可以直接用satari开发工具调试。chrom

+android也有类似的工具组合,但是没有实际

过。楼主如果觉得不太满意的话,可以去后盾人看看,那里也许会有不错的答案

7. 华为荣耀8怎么连接电脑 移动前端调试

点击“手机->设置->关于手机->版本号“,点击7次,即可开启开发人员选项。点击返回键后,点击“开发人员选项->开启USB调试->点击允许USB调试“。由于Google安全限制,需要进行如上操作才可以打开USB调试,如果弹框未出现,请重新插拔一次USB线

8. 移动端web前端开发有没有能够在pc上面模拟调试的IDE

简单的可用chrome、火狐的开发者工具去模拟窗口,
复杂的可用Start BlueStacks去模拟安卓端

9. 前端开发是怎么调试的

如果是网页开发的话呢 可以使用浏览器的f12 开发人员工具调试。如果是安卓或者ios呢可以抓包获取接口请求信息,或者使用日志输出来检测。

10. 怎样方便的调试前端代码

最简单的方式就是 live reload 。可以看看 Browsersync ,command line 的方式应该不用写代码,不过你要装个 node + npm 。