关于如何在PC上调试手机X5内核浏览器下的WEB页面

当我们在开发移动端WEB页面时经常会遇到X5内核（也就是QQ浏览器以及微信内置浏览器）与其他浏览器出现不一致的地方，而且有时候很难判断其原因所在，这时候就希望能像PC端浏览器一样在开发者工具上调试页面，找出其原因所在，如果大家目前正被这个问题所困扰，那么这次将解决大家的问题，希望对大家有所帮助。

正题：

第一步：首先，我们需要一个官网所提供的微信开发者工具，地址：http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html。

进入网站后拉到最底下可以找到如图所示的页面：

点击下载对应系统版本的开发者工具并安装即可。

第二步：

安装完成之后我们打开。

进入软件后不出意外会有提示框让你扫描二维码进行登陆，这里一定一定要登陆！！！！否则就无法进行调试了。

登陆完成后在

这里可以看到登陆按钮变成了你的微信头像，这样就代表登陆成功。然后我们可以看到有个“移动调试”的按钮，点击后会出现如下界面：

然后这里按步骤操作下就好了（小提示：这里需要你的手机开启USB调试，否者也是无法调试的，具体开启方法自行百度自己的手机机型进行开启操作，并且需要使用手机微信扫描），扫描后手机微信跳转的页面什么都不要去动，只要找到信息选项，在里面找到“是否打开TBS内核Inspector调试功能”这几个字样（不排除文字有些差异，意思一样就OK了），打上勾后就可以左上角叉掉了。

然后我们回到电脑上，在同一个界面下拉到最底下可以看到“开始调试的字样”（调试方式不要动，默认X5内核就可以了），点击后会弹出一个界面来，界面如下所示：

第三步：

这里需要开启一个本地（调试用的）服务器，本人最常用的是使用gulp来创建本地服务器 。然后在手机微信上打开这个服务器地址下你要调试的页面，关于怎么在手机微信上打开这个电脑上服务器地址下的页面。。。可以在电脑上先打开一次把地址栏上的地址直接拷贝发给自己的微信就好了，然后再打开自己的微信点击就可以打开了~~~~~。其他类似方式都可以的，只要是在手机微信上打开即可~~~（一定要在微信上打开要调试的页面。。。。）打开后电脑上刚打开的那个界面就会出现你刚打开的那张页面了，类似下面这张图这样：

然后我们点击inspect这个按钮  就会打开一个弹窗，然后你会发现。。。。。。很熟悉有木有！！！！熟悉就对了233333，然后你就会发现鼠标指哪个标签上，手机微信上的元素就会出现很熟悉的选择框了~~~~剩下的我就不用多说了吧~~~下面放上最后两张调试图~~~~~