使用谷歌浏览器调试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账号进行调试。