兰州网站建设方案详细,短视频分享网站开发,做网站先建立模型,创意视差wordpress主题文章#xff1a;樊秀宝(北京中心—小易F8技术小组)排版#xff1a;suny在日常项目中的开发中#xff0c;接触移动端开发的小伙伴们免不了要和移动端调试打交道。本文总结了常用的移动端调试方法#xff0c;欢迎大家学习和补充。01谷歌浏览器谷歌浏览器是我们前端开发中必不… 文章樊秀宝(北京中心—小易F8技术小组)排版suny在日常项目中的开发中接触移动端开发的小伙伴们免不了要和移动端调试打交道。本文总结了常用的移动端调试方法欢迎大家学习和补充。01谷歌浏览器谷歌浏览器是我们前端开发中必不可少的利器。跳样式、打断点、看网络请求、看性能等基本上你能想到的谷歌都能满足你。在移动端调试方面也是一样我们可以利用谷歌浏览器的手机模式如下图, 点击这个右侧红框手机按钮便可以切换为手机模式同时我们还可以在左侧红框内点击下拉箭头选择不同的手机模式还可选择responsive模式自定义宽高。与此同时我们还可以自定义设备修改浏览器的ua用来调试哪些只允许微信访问的页面如下图通过谷歌浏览器就可以满足我们大部分需求但是实际开发中由于各种机型的问题真机调试也成为了前端的必修课。02安卓手机调试由于安卓系统的便利性我们可以方便的在电脑端调试真机包括微信端页面步骤如下1. 手机打开开发者选项选择允许usb调试(由于安卓机型较多具体开启方法不一一阐述了)2. 微信中打开网址 http://debugtbs.qq.com选择允许tbs调试如下图3.在谷歌浏览器中输入chrome://inspect/#devices, 用usb连接手机便可以看到我们当前手机中访问的页面点击即可弹出调试页面,与pc端页面一样我们同样可以打断点查看网络请求等。初次连接需要保证我们的电脑可以访问 chrome-devtools-frontend.appspot.comchrometophone.appspot.com两个网址否则显示的页面会为空白在此给大家安利一个神器http://ping.chinaz.com 输入我们的网站点击ping检测等待一段时间即可在下面列表中展示多地ip ping我们网址的列表找出哪些可以ping的通的然后修改本地host即可。03iphone调试针对苹果手机我们可以优先在iphone用safari访问打开safari的web检查开关连接电脑即可看到我们手机上访问的页面不过调试没有chrome方便。04spy-debuggerspy-debugger是一站式页面调试、抓包工具。远程调试任何手机浏览器页面任何手机移动端webview(如微信HybridApp等)。支持HTTP/HTTPS无需USB连接设备。spy-debugger的特性包括页面调试抓包操作简单无需USB连接设备支持HTTPSspy-debugger内部集成了weinre、node-mitmproxy、AnyProxy自动忽略原生App发起的https请求只拦截webview发起的https请求对使用了SSL pinning技术的原生App不造成任何影响。可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)05调试方法1、安装spy-debuggersudo npm install spy-debugger -g 2、手机和PC保持在同一网络下3、手机开启网络代理ip为pc的ip端口号默认为98884、https页面需手机安装证书5、命令行输入spy-debugger 此时界面如下此时我们便可以在elementsresourcesconsole等进行我们的调试了。同时我们还可以运用spy-debugger自带的anyproxy进行抓包如下图06调试抓包工具推荐mac端charles、window端Fiddler进行抓包我们可以抓取各种网络请求同时还能动态修改请求且用本地文件替换网络文件方便本地代码调试线上代码具体教程可自行搜索。END 往期推荐01Web前端安全的那些事儿02Vue项目优化03你可能不知道的前端小技巧嗨你“在看”吗
