chrome切换前端模式_前端谷歌chrome浏览器调试总结

本文分享了使用Chrome浏览器进行前端开发的调试心得,包括箭头按钮和设备图标的选择元素与模拟设备功能,Elements的DOM与CSS查看与修改,Console的命令输出与数据查看,Sources的JS源文件调试,以及Network的网络请求分析。通过这些工具,开发者可以高效地定位和解决问题。
摘要由CSDN通过智能技术生成

写在前面:

在简书看了一篇很全面的博客https://www.jianshu.com/p/b25c5b88baf5,内容文字几乎都是原作的,图片是我自己加的,也顺带回顾下暑期实习。

上个学期四五月份开始零基础学习前端,当时对于谷歌浏览器的控制台没什么概念,有幸暑假在公司实习两个月,分享一下我使用谷歌浏览器的调试心得。

调试工具:

一、箭头按钮和设备图标

箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,箭头按钮会变成选择状态。

点击后可以在页面上选中自己想要的元素,如下图:

设备图标:点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择。如下图可见:

二、Elements

用来查看,修改页面上的元素,包括DOM标签,以及css样式的查看,修改,还有相关盒模型的图形信息。

下图我们可以看到当我鼠标选择id为main的div元素时,右侧的css样式对应的会展示出此id的样式信息,此时可以在右侧进行一个修改,修改即可在页面上生效。因为每在编辑器中修改一次代码就刷新页面实在是太低效了,而且很不方便。

盒模型的图形信息

三、Console

用于打印和输出相关的命令信息,其实console控制台除了我们熟知的报错,打印console.log信息外,还有很多相关的功能,下面简单介绍几个:

(1)一些对页面数据的指令操作,比如打断点正好执行到获取的数据上,由于数据都是层层嵌套的对象,这个时候查看里面的key/value不是很方便,即可用这个指令开查看,obj的json string 格式的key/value,我们对于数据里面有哪些字段和属性即可一目了然。

(2)除了console.log还有其他相关的指令可用(console.error,console.warn等)

三、Sources

js资源页面:这个页面内我们可以找到当然浏览器页面中的js 源文件,方便我们查看和调试。可以看一些大站的js代码,虽然基本都看不懂,但是最起码可以看看人家的代码风格,人家的命名方式。所有的代码都是压缩之后的代码,我们可以点击下面的{}大括号按钮将代码转成可读格式。

Sinppets:当我们想在控制台随意写一些测试代码,或者想测试一下刚刚写的方法是否会出现期待的样子,但是控制台一打回车本想换行但是却执行刚写的半截代码(其实在控制台里编写代码换行也是可以的,按shift+enter键就可以换行啦,不过还是有点麻烦,mac和windows系统都适用),所以推荐使用Sources下面的左侧的Sinppets代码片段按钮,这时候点击创建一个新的片段文件,写完测试代码后把鼠标放在新建文件上run或者点击右边的

,再结合控制台查看相关信息(新建了一个名叫:test的片段代码,在你的项目环境页面内,该片段可执行项目内的方法)

Content scripts: Chrome 的一种扩展程序,它是按照扩展的ID来组织的,这些文件也是嵌入在页面中的资源,这类文件可以读写和操作我们的资源,需要调试这些扩展文件,则可以在这个目录下打开相关文件调试,但是几乎我们的项目还没有相关的扩展文件,所以啥也看不到,平时也不需要关心这块。

断点调试:

(1)如何打断点

找到要调试的文件,然后在内容源代码左侧的代码标记行处点击即可打上一个断点。

(2)断点与js代码修改

看下面这张图,我在一个名为toggleTab的方法下打了两个断点,当开始执行我们的点击切换tab行为后,代码会在执行的断点出停下来,并把相关的数据展示一部分,此时可以在已经执行过得代码处,把鼠标放上去,即可查看相关的具体数据信息,同时我们可以使用右侧的功能键进行调试,右侧最上面一排分别是:暂停/继续、单步执行(F10快捷键)、单步跳入此执行块(F11快捷键)、单步跳出此执行块、禁用/启用所有断点。下面是各种具体的功能区

在当前的代码执行区域,在调试中如果发现需要修改的地方,也是可以立即修改的,修改后保存即可生效。

四、Network

网络请求标签页,可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看。

还可以看到一些请求头以及具体的信息:

写在后面:

笨博客只介绍了这几个比较常用的,实际上还有几个不太频繁使用的,例如Memory、Audits等,可以要用到的时候再查阅资料。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值