使用chrome控制台让开发事半功倍

热网热热 5评论
个人这两年的开发经验来说,合理的运用chrome对我们的开发效率,bug定位有大的提高和帮助。
下面我从开发效率和bug定位两个方面,来分享一下我是如何使用chrome 的。

开发效率

这里的开发效率主要是指页面布局和代  码调试方面。
就我个人而言,看到设计稿之后,大脑里面会先构思如何排版,如何进行html结构设计。要有全局观,比如看到设计稿要学会进行分块,那些块可以归属一个容器,那些应该单独分开,各个元素要都考虑一下应该放在什么位置合适,这样才不会做好排版之后,发现之前设计的结构有问题,需要返工。
有一个比较清晰的html结构之后,就开始写html代码了。写代码的同事把class类名都定义上,这里的html代码一块一块的完成,比如先完成导航这一块的html代码。完成之后就去根据自己的印象和理解写css代码,把定义的class类名都定义到css文件中,并往里加样式,这里能加多少就多少,跟着感觉走就行。
chrome浏览器开发
加好一部分分css代码之后就可以在浏览器预览页面效果了,这时页面排班还是比较凌乱的,但是这时候是重点了,这里我们需要打开chrome控制台,找到Elements,选择需要排班的标签,然后在右侧Style一栏这里点击加好,就可以为这里的元素添加样式了,浏览器支持各种样式的输入,也有代码提示,直接修改立马见效十分方便。
觉得样式调整的可以了之后,就可以把代码复制到css文件中。这里有一点很重要就是在没有复制修改的代码之前不要刷新,刷新之后在浏览器修改的代码就没有了。
在使用JavaScript的开发的项目的时候,也时常需要处理大量数据,很多数据的变动和流向我们无法完全记得住,这里运用console就更清晰直观的知道我们的数据处理情况,不推荐用alert,alert会阻塞程序执行,而且体验极其不好,万一调试代码忘记删除整上线了可尴尬。
打断点也是很靠谱的方式,特别是迭代开发的时候,看别人代码光看真的够无聊的,把代码运行起来,通过断点结合console来分析代码逻辑最好不过了。

bug定位

没有哪一位程序员不写bug,bug在我的职业中是家常便饭,这都不重要,重要的是及时发现定位并解决bug。
通过chrome的console看报错是很好的一种寻找bug的方式,会告诉出错的类型那个文件,点击进入文件还会定位到是哪一行。
找到报错位置应该就会知道什么原因,如果还不明了具体原因可以是使用打断点并且使用console.log输出看看是不是数据类型等其他原因导致。
有的时候我们的代码导致内存泄漏了,这时候没有报错,浏览器卡死,我们无法定位自己的代码什么位置出错,此时我有一个技巧,就是在我们代码中可能会出错的前面范一个语法错误,然后浏览器打开刷新,这时候浏览器应该会提示有语法错误,我们从console中打开这个文件并找到这个报错的位置,在后面或者前面打一个断点,然后范围编辑器吧语法错误修改,再返回浏览器刷新。此时程序正常执行到我们的断点位置,自行一步一步往下走就能很快定位错误。
 

转载请注明觅施南网,使用chrome控制台让开发事半功倍:https://www.rewonng.com/qianduanzhishi/155.html

查看剩余内容

相关内容推荐

猜你喜欢内容