摘要：在开发时，当然少不了调试呀。把安卓手机打开调试模式不知道在哪呀，赶紧百度，然后用连接上电脑，再打开浏览器，在平时我们输入网站域名的地方，输入以下字母代码。
今天我们来聊聊APP开发，现在呀，人手都一部手机以上，就连7、8岁的孩子都自带一台手机了，手机给我们的手机带上了多大的改变呀。
先扯点数据哈，2016年4月，在移动互联网上，平均每个用户每日花费时间为200分钟。中国有3个互联网巨头，腾讯、阿里巴巴、百度，而网民花在这3个公司产品上的时间，占总花费时长的71%，其中微信占35%，QQ占10%。
微信占35%，现在的微信呀，已经是比QQ时代占领的强度、广度都要大呀，整个家，除了奶奶没在用微信，哪个不是天天微信左扯一句，右扯一句的呀。
噢，扯远了，回来回来。
现在我们的APP开发，大概可以分为Web App、Hybrid App、Native App，那在微信公众号打开的html5页面，我们可以简称为web app，Web App 指采用Html5语言写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。
以PC为王的时代，我们开发web时，调试是挺简单方便快捷的，用得最多的就是谷歌开发的神器，chrome-devtools，在谷歌浏览器里，F12直接打开chrome-devtools就可以直接进行开发调试了。
那到现在我们手机为王的时代，我们的视线从电脑转移到巴掌大的手机上。在开发web app时，当然少不了调试呀。通常我们在开发web app时，在功能、界面开发时，可以先在PC上开发完成，等最后再走手机测试调试。
我们就博客来当例子，现在打开，是适配PC界面的，当我们要进行手机端开发时，请先点击手机图标，看截图。
我们现在看到的截图中，可以看到一个手机界面的尺寸了，方便我们按手机的分辨率来进行开发。
当我们基本开发完成后，虽然在真实的手机端进行测试，还是以博客为例子。
问题来了，如果我们直接在手机端进行类似于pc端的chrome-devtools怎么办呀？之前这个问题也困扰了我很久，特别是在开发只允许在微信端打开的项目，一拿到PC端，狠狠的给你提示，请在微信端打开此页面，感觉不在再爱了。
后来微信推出了微信web开发者工具，也使用过一段时间，也可以使用Chrome DevTools来远程协助开发，今天的教程主要并不是这个，因为主要是针对于微信开发的，此次教程不局限于微信，只是web app都可以使用远程chrome-devtools来调试，如果有想了解微信web开发工具的童鞋，请点击这里。点击这里！点击这里！
容我想想，咱们还需要点什么工具呢，噢，对了，还要一台安卓手机，苹果不行呀（果粉请不要黑我，只支持安卓）。
把安卓手机打开USB调试模式（不知道在哪呀，赶紧百度），然后用USB连接上电脑，再打开浏览器，在平时我们输入网站域名的地方，输入以下字母代码。
chrome://inspect
截图中，“1”的位置，就是输入chrome://inspect回车就可以看了。
重点来了，PC时代我们要按F12才出来的chrome-devtools，到手机时代，请点击截图中“2”的inspect。
天呐，熟悉的chrome-devtools又出现了，功能按打开PC页面是一样的，还有一个亮点哦，来来，再看截图。
亮点就是映射了一个界面到chrome-devtools里，还可以直接在chrome-devtools进行操作，放手双手呀。打开这个界面的方法，看截图的箭头哈，点击一下就可以看到了。
这个调试用途非常广，平时我们在开发Web App、Hybrid App、Native App时，只在在使用web打开的，基本可以用这个方法来调试。
今晚扯得有点多，又凌晨呀，时间都去哪啦。
文章首发于：http://lanchenglv.com/article...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/59960.html
摘要：在开发时，当然少不了调试呀。把安卓手机打开调试模式不知道在哪呀，赶紧百度，然后用连接上电脑，再打开浏览器，在平时我们输入网站域名的地方，输入以下字母代码。 今天我们来聊聊APP开发，现在呀，人手都一部手机以上，就连7、8岁的孩子都自带一台手机了，手机给我们的手机带上了多大的改变呀。 先扯点数据哈，2016年4月，在移动互联网上，平均每个用户每日花费时间为200分钟。中国有3个互联网巨头...
摘要：在开发时，当然少不了调试呀。把安卓手机打开调试模式不知道在哪呀，赶紧百度，然后用连接上电脑，再打开浏览器，在平时我们输入网站域名的地方，输入以下字母代码。 今天我们来聊聊APP开发，现在呀，人手都一部手机以上，就连7、8岁的孩子都自带一台手机了，手机给我们的手机带上了多大的改变呀。 先扯点数据哈，2016年4月，在移动互联网上，平均每个用户每日花费时间为200分钟。中国有3个互联网巨头...
摘要：查看安装包版本信息查看信息提供扫描二维码打开网页。所以端发起网络请求的时候，需要使用，这样就可以避免这个问题参考资料什么是方案之和页面交互原理的原理实现示例三部曲基本用法 1. 为什么选择Hybrid开发方式 Hybrid开发效率高、跨平台(M /58APP/英才APP) 维护成本低,功能可复用 针对新手友好,学习成本较低 功能更加完善,性能和体验要比起web app好太多 部分性能...
摘要：详见调试调试浏览器页面在设置高级里检查器打开连接随便打开一个页面在开发的选项中，可以检查到打开的页面，点开就可以对该页面进行进一步的调试。 本人工作平台mac，以下全部针对mac平台 Charles http抓包 proxy>proxy settings 设置代理端口 手机设置代理连到端口上 手机里的所有请求都能被charles抓到 https抓包 proxy>SSL proxy...
阅读 2885·2021-11-22 09:34
阅读 409·2021-11-22 09:34
阅读 2251·2021-10-08 10:18
阅读 1802·2021-09-26 09:55
阅读 3149·2021-09-22 15:57
阅读 2362·2021-09-22 15:25
阅读 2391·2021-09-02 15:34
阅读 2098·2019-08-30 15:54
