使用谷歌浏览器调试PC网页、手机APP

谷歌即为chrome浏览器，对于开发前端页面有很大的优势。

一、谷歌调试PC网页

（1）首先打开chorme浏览器，输入https://www.baidu.com进入百度页面，在空白页面右击，选中“检查”，（或者直接按快捷键ctrl+shift+i）如下图：

（2）点击“审查”会出现如下图：

（3）根据出现的调试窗口，最常用的是Elements（是你当前访问的网页的Dom）、

Console控制台（主要用于调试当前页面的js，可以直接输入js代码。也可以在程序中直接写console.log("aaa",aaa)就会在console中打印出aaa aaa）

Source（是当前站点所加载的所有资源的列表，可以看到所引用外部js、图片、css等）

Network（可以监控访问网站所请求的网络资源，包括图片、媒体、字体、js、css、XHR等）。

补充：如下图可以直接定位到想要查看的元素位置，直接定位到对应的dom及css，也可以在css中直接修改样式在浏览器里调试，但是这种方法只在当前浏览器窗口适用：

（4）在PC端调试页面时，可以直接在调试窗口查看不同分辨率的页面，如下图：

二、调试手机app：

开发移动端app时，将打包生成的APP安装到手机上后，如果对于样式有调整或者需要查看APP的数据交互时，就少不了谷歌浏览器的扩展应用adb了。扩展应用adb的作用是把手机上的APP页面用网页的形式在电脑上打开，开发人员便可根据自己的需求进行调试。下面介绍扩展应用adb的使用。

（1）打开谷歌浏览器的扩展应用窗口，如下图：

图1：

图2：

图3：

因为我已经添加了adb应用，所以这里不显示“添加至CHROME”，没有添加adb扩展应用的点击“+添加至CHROME”就可以了。

（2）添加完后，回到扩展应用的窗口，就会出现下面的图标，表示添加成功：

会在浏览器的页眉处出现这样的小图标：

（3）点击小图标，进入检测手机的页面：

图1：

图2：

（4）用usb连接手机，并且打开手机的usb调试选项。打开设置---更多设置----开发者选项----USB调试、USB安装、USB调试（安全设置）。如果找不到开发者选项，一般打开设置---关于手机----连续点击（Android版本或者MIUI版本等，具体方式请百度解决）----更多设置---开发开发者选项----USB调试、USB安装、USB调试（安全设置）。

（5）USB连接手机后，打开要调试的app，就会在网页上显示要调试的链接，然后点击进入调试窗口inspect：

（6）有时候出来的inspect是空白页面，如下图：

说明您需要翻墙才能访问，您就需要搜一下怎么翻墙，或者直接购买vpn账号进行调试。

使用谷歌浏览器调试PC网页、手机APP相关推荐

电脑 win10 android,新版win10 20185来袭！微软：让你可以直接从PC访问手机App
对,没错,继5月更新之后,微软最新Windows 10 20185测试版发布了! 微软昨日在开发通道中向 Windows Insiders,发布 Windows 10 Insider Preview ...
用edge调试安卓或者手机app的样式
1.用usb连接好电脑和手机 2.hbuilderx真机调试运行app到手机 3.打开edge,输入edge://inspect/ 回车点击inspect就可以检查元素了,但是无法直接在里面设置 ...
H5工程师在谷歌浏览器调试并开发原生APP项目的解决办法
背景:项目是前后端分离,我想在浏览器调试项目,工具使用HB-X.密码是不可输入状态. 1.login.html在HB-X中运行到谷歌浏览器页面 .按F12进入调试模式. 2.密码做了安全防御,不能直接 ...
微信第三方登录（PC网站、APP、移动网页）
最近搞微信第三方登录,搞蒙圈了. 我们的业务有两个场景需要使用微信第三方登录: 1.APP 第三方登录 2.H5网页第三方登录,具体流程:用户微信端收到一个二维码--->扫码后同意微信授权--& ...
使用谷歌浏览器调试手机网页
使用谷歌浏览器调试手机网页方式1:控制台使用手机模拟器方式2:这种方法仅供特殊情况下使用,因为重启Chrome将不能恢复正常User-Agent(需要将全部打开的chrome窗口关闭,再打开才能起 ...
电脑端html转手机app,如何从PC或手机上的网页链接完美切换到App--传媒--人民网...
在智能手机出货量超过PC和功能手机.用户使用App比例超过80%以上的情况下,智能手机App绝对成为了人们生活的主角.对于PC.平板.智能手机之间的跨平台无缝体验,很早之前开发者就开始关注了,当大量A ...
手机Web前端调试页面之——Chrome DevTools（谷歌浏览器）的模拟手机调试
Chrome DevTools(谷歌浏览器)的模拟手机调试前言在客户端开发中,由于使用手机app加载webview页面,客户端与前端经常会出现数据交互情况: 但是在手机中无法调试看到前端代码的步骤 ...
【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果
. 今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧,主要是最近做个微信公共号网站.所以就要对页面测试拉.移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示. 今天就简 ...
支付宝实现移动网页支付、PC网页支付、混合APP支付（支持微信支付）
1.移动网页支付支付宝开放平台中申创建移动网页应用: 前端比较省事 1.若后台返回的是form表单执行以下代码,每次用完及时销毁: 当然不想写承载页的还有其他方法调起支付,具体逻辑具体分析,根据不同 ...

使用谷歌浏览器调试PC网页、手机APP

使用谷歌浏览器调试PC网页、手机APP相关推荐

最新文章

热门文章