如何使用chrome浏览器调试?

做前端开始的,基本有很多人都在使用chrome浏览器的调试功能,我基本上是全部使用chrome浏览器进行调试的。IE的调试,实在是不敢恭维。下面我简单分享一下chrome浏览器的简单使用。一些比较高级的调试用法,还没有掌握,等掌握了之后,再好好写笔记。

下面是分享给同事的技术分享。

在chrome浏览器中打开http://localhost:3000,按F12,或者右击->单击【检查】.

选择适合你的模拟的手机型号即可。在这里可以选择安卓手机类型,也可以选择苹果手机类型。还可以自定义移动设备的屏幕尺寸,以及横竖屏。

A:可以自定义一些移动设备。 B:可以选择一些现有的移动设备。一般用的比较多一些。

在右上角可以调节调试页面显示的位置。有三种结构,我一般喜欢所有结构的,大家可以根据自己的使用习惯来调整。

点击A那的小按钮,然后点击屏幕上你想查看的元素,对用的右边C部分就可以显示出来代码了。

1-4_副本.png

然后点击代码,就可以在右侧查看对应的css样式。

1-5_副本.png

在【console】中,可以查看在启动运行过程中出的一些错误。

1-6_副本.png

在【Sources】中存放的是源码。

A 部分是咱们存放的源码部分。其中bundle.js中存放的是公共代码,index.js中存放的是业务代码。

1-7_副本.png

调试代码,找到需要打断点的地方打好断点,然后刷新浏览器,点击进入需要调试的部分,就可以进行调试。

其余一些chrome浏览器的一些调试方式,大家可以上网搜索下,以上说的都是一些常用的一些方法。

chrome浏览器不错使用方式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券