欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

chrome浏览器调试手机端h5页面教程

程序员文章站 2022-07-11 07:58:20
这个是常识性的问题了。奈何我之前确实是不知道。只知道用f12来调试pc端的页面,这次经过同事指点,终于知道为啥人家在调试手机端页面,显示的大小都是手机端的。 步骤: 1、打开f...

这个是常识性的问题了。奈何我之前确实是不知道。只知道用f12来调试pc端的页面,这次经过同事指点,终于知道为啥人家在调试手机端页面,显示的大小都是手机端的。

步骤:

1、打开f12

2、如果所示点击

chrome浏览器调试手机端h5页面教程

咱们平时寻找网页的dom节点,都是用的第一个。

第二个就是专门用来调试手机端页面的。先点击这个按钮。

3、选择适配的手机型号

chrome浏览器调试手机端h5页面教程

按照2操作点击之后,我们可以看到这个界面。箭头的位置是一个下拉选项框。可以通过这个选项框来选择要适配的手机型号。

4、最终页面展示

chrome浏览器调试手机端h5页面教程

如图,我这里是选择的6p大小,所以在浏览器上显示的就是近似于6p手机大小的页面。这些基本操作,对前端同学来说简直不要太平常。但对于我这种前端渣,用这种方式是在是方便了太多。记录一下。

end