首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

如何调试移动端页面

作者:汪娇娇 时间:2018年6月2日 之前一段时间过于忙碌,积压了很多博客,现在慢慢来还债啦~~ 大家都知道,挂在PC端上的页面一旦出现问题,是比较容易进行调试的,只要下载对应的浏览器,打开控制台,打断点或直接看一下出问题的点...但一旦移动端页面出现问题,尤其市面上安卓那么多机型,出了问题,连个调试方法都没有。那么,下面就给大家介绍一下我使用的一些调试方法吧。...然后按照调试pc端页面的思路来调试移动端页面就可以啦~~~ 三、Charles 这个是抓包工具,可以抓取 request 和 response 数据。...其他功能可以参考这篇文章:charles使用教程 四、微信开发者工具 微信开发者工具对微信公众号里的页面测试还是很方便的,比如测试微信分享功能等,对于一般的浏览器页面用前面介绍得到几种方法其实就足够了。...然后点击inspect即可开始调试当前手机谷歌浏览器打开的页面: ?

3.6K30

Android远程调试Web页面

曾经有一段时间专门处理了一下远程调试的事情,要解决的问题是不依赖Chrome如何在移动设备中调试Web页面。...利用Chrome调试Android Web页面,本来是很好的事情,但是由于Google在打开调试面板时,这个域名是google.com,我们都知道这个域名在中国大陆被封了,但我们又要调试,于是陷入了黑暗的死循环...今天,要分享的就是,如何绕过google.com域名,并且能正常顺利的去调试Android Web页面。...在我们的调试工具中,主要利用到的是host:devices,host:transport:,:forward:; 以及LOCAL SERVICES shell:command arg1 arg2…(官方文档...,以及友商App的调试状态,我们还需要进一步的区分我们自己的环境。

1.5K20

iPhone页面的常用调试方法

在iPhone中调试,大体上与上文 安卓中的移动页面调试 类似,区别主要是iOS系统中的一些限制,导致某些工具无法使用。 本文基于此,简要介绍在iPhone中如何调试页面。...基于 ios-webkit-debug-proxy 的调试 Mac上的safari调试功能不够好,而且不能调试微信中的页面,使用weinre只能简单地调试微信页面,无法进行脚本断点等高级功能 最好的办法莫过于让...: https://www.microsoft.com/en-us/download/details.aspx?...或者使用Chrome自身的DevTools来调试,即可实现在Window中调试手机Safari页面(然而还是不支持微信内置的) ?...登陆后,访问相关页面,就可以调试webview了 方法同上,可在Mac上使用Safari来调试内置浏览器的页面,公众号,小程序等 ?

3.3K10

利用whistle调试移动端页面

移动端调试遇到的问题 相较于PC侧,在移动端调试网页,主要会遇到以下三个问题: 没有Console,无法查看页面的js错误及通过 console.xxx 输出的调试日志 无法查看、修改页面的DOM结构及样式...无法debug 一般情况下,移动端页面在PC的Chrome浏览器上模拟器上进行调试,但并非所有移动端页面都可以在PC的模拟器上调试,比如一些需要调用到APP的本地API的APP内嵌页面,或者测试页面兼容性问题等...,只有在真机上运行才能看到真实效果,这个时候可以利用whistle,通过简单配置即可解决上述的前两个问题(目前无法通过页面js获取页面调试信息,暂不支持debug功能,可以通过 console.log...来代替): 利用whistle查看页面的js错误及通过 console.xxx 输出的调试日志 whistle内部实现了类似浏览器的Console的远程Log平台,只需配置简单的whistle规则即可自动捕获页面的错误及...注意: vConsole和weinre不能同时使用 whistle还有很多应用场景,后续再逐步输出给大家,了解更多内容请访问whistle的Github:https://github.com/avwo/

3K90

使用weinre调试手机页面

展现调试界面,允许你修改dom,查看网络信息等。 3. debug target.  待调试页面。你需要在页面中嵌入一小段js。...假设我们要调试页面运行在10.136.30.144:3927 页面中引入js后,用手机浏览器打开待调试页面 http://10.136.30.144:3927/new 4....开始调试 手机访问页面后,我们回到步骤2中所说的调试界面。发现此时,targets中多了一条,即是我们在步骤3中用手机打开的待调试页面。 ?...点击调试页面中的remote, 可以从调试页面切回targets列表。 3....但无法像firebug那样报出js的错误,更不能加断点调试。 anyway, 即使是这样,也为我们的调试提供了一定程度的便利。总比闭起眼乱碰好的多。

1.2K30

利用whistle调试移动端页面

移动端调试遇到的问题 相较于PC侧,在移动端调试网页,主要会遇到以下三个问题: 没有Console,无法查看页面的js错误及通过 console.xxx 输出的调试日志 无法查看、修改页面的DOM结构及样式...无法debug 一般情况下,移动端页面在PC的Chrome浏览器上模拟器上进行调试,但并非所有移动端页面都可以在PC的模拟器上调试,比如一些需要调用到APP的本地API的APP内嵌页面,或者测试页面兼容性问题等...,只有在真机上运行才能看到真实效果,这个时候可以利用whistle,通过简单配置即可解决上述的前两个问题(目前无法通过页面js获取页面调试信息,暂不支持debug功能,可以通过 console.log...来代替): 利用whistle查看页面的js错误及通过 console.xxx 输出的调试日志 whistle内部实现了类似浏览器的Console的远程Log平台,只需配置简单的whistle规则即可自动捕获页面的错误及...注意: vConsole和weinre不能同时使用 whistle还有很多应用场景,后续再逐步输出给大家,了解更多内容请访问whistle的Github:https://github.com/avwo/

1.5K20

原 如何调试移动端页面

作者:汪娇娇 时间:2018年6月2日 之前一段时间过于忙碌,积压了很多博客,现在慢慢来还债啦~~ 大家都知道,挂在PC端上的页面一旦出现问题,是比较容易进行调试的,只要下载对应的浏览器,打开控制台,打断点或直接看一下出问题的点...但一旦移动端页面出现问题,尤其市面上安卓那么多机型,出了问题,连个调试方法都没有。那么,下面就给大家介绍一下我使用的一些调试方法吧。...然后按照调试pc端页面的思路来调试移动端页面就可以啦~~~ 三、Charles 这个是抓包工具,可以抓取 request 和 response 数据。...其他功能可以参考这篇文章:charles使用教程 四、微信开发者工具 微信开发者工具对微信公众号里的页面测试还是很方便的,比如测试微信分享功能等,对于一般的浏览器页面用前面介绍得到几种方法其实就足够了。...然后点击inspect即可开始调试当前手机谷歌浏览器打开的页面: ?

2.2K70

安卓微信页面调试

调试页面,有几个维度要考虑:能够访问页面、审查元素查看页面输出、抓包查看请求模拟登陆、断点调试、性能测试、在模拟器上调试、在真机上调试 本文仅涉及基础页面调试,不涉及Hybrid app、公众号JDK...第一个调试基础是查看页面的元素和基本的日志输出。...Chrome远程调试 远程调试,代名词,其实只是在PC上调试手机中访问的页面,通过USB连接进行调试。...不过有个缺陷,就是不支持HTTPS,所以访问HTTPS的页面会出现白屏 使用USB调试X5内核 这种方法可以调试微信浏览器、QQ浏览器 或其他使用了X5内核的相关页面,可以进行脚本的断点调试...同样的,需要先保证X5打开了可调试的选项,打开页面后开始调试页面列表中选择inspect审查即可,同样地会调用开发者工具集成的Chrome DevTools,所以初次也需要爬墙找调试工具包

4K20

前端页面如何禁止别人调试

前端防止调试的思路与方法 我们都知道 debugger 在控制台被打开的时候就会执行, 前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点,让控制台打开后程序就无法正常执行,以下是一个基本防止调式的代码...debugger; }, 50); } try { block(); } catch (err) {} })(); 加了上面的代码以后,在页面中打开控制台后会有以下效果...程序被 debugger 阻止了,我们无法像以往一样在 Source Tab 中的对应 JS 代码处添加断点调试,无法调试程序的执行逻辑。 2....突破防止调试的方法及对策 在对应的代码行添加logpoint为 false,然后按回车后刷新网页,发现成功跳过无限 debugger,于是我们就可以愉快的自由调试了。...推荐一个调试的小技巧 通过给 style 标签添加 style="display: block",contenteditable 两个属性实现在页面中便捷的调试样式。

1.6K10

前端页面如何禁止别人调试?

前端防止调试的思路与方法 我们都知道 debugger 在控制台被打开的时候就会执行, 前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点,让控制台打开后程序就无法正常执行,以下是一个基本防止调式的代码...debugger; }, 50); } try { block(); } catch (err) {} })(); 加了上面的代码以后,在页面中打开控制台后会有以下效果...程序被 debugger 阻止了,我们无法像以往一样在 Source Tab 中的对应 JS 代码处添加断点调试,无法调试程序的执行逻辑。 2....突破防止调试的方法及对策 在对应的代码行添加logpoint为 false,然后按回车后刷新网页,发现成功跳过无限 debugger,于是我们就可以愉快的自由调试了。...推荐一个调试的小技巧 通过给 style 标签添加 style="display: block",contenteditable 两个属性实现在页面中便捷的调试样式。

1.9K30

突破前端反调试--阻止页面不断debugger

问题重现 一次扒某网站的前端代码,打开控制台要看Network,结果发现他们页面一打开控制台就不断的debugger,100ms一次,很影响看页面内容。就像下面这样的 2....问题分析 每次在断点处停下来的时候页面都会跳到source这个tab页面,也能够看到他的debugger的代码,其实他的实现很简单,只有这一行代码 (function() {var a = new Date...不停地打断你,页面跳到source页面,阻止你看他代码不 断的产生不可回收的对象,占据你的内存,造成内存泄漏,没过多久浏览器就会卡顿 所以他带来的影响还是挺大的,我们需要解决这个问题。...比如这样: 3) 还有这样的条件断点 setInterval(function () { debugger }, 100); // 举个例子而已,很多网站并不是这么实现的 直接上动图说明情况 再来说说不能应对的情况...能work的情况 不能work的情况 4) 如果上面的方法都不能解决的话,就需要把这个 js 文件下载下来,然后改动触发 debbgger 的代码了。

6.3K30
领券