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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/guoyangyang123456/article/details/65626901

谷歌即为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账号进行调试。

 

 

 

展开阅读全文

没有更多推荐了,返回首页