神器Chrome
说起神器Chrome,大家应该还是比较熟悉,他可是V8的发动机,多进程,跑起来可不是一般的快(我在想什么时候搞个V12的8.0T,哈哈),Chrome使用方便,功能强大,插件众多,关键是调试CSS,JS功能非常强大。
引用Chrome官网的几句话:Chrome 浏览器是一款专为现代互联网开发的网络浏览器,高速、简约而且安全,在每个新版本中,Chrome 浏览器都配备了 V8和 Kraken 基准,从而不断提高 JavaScript 速度。 Chrome 浏览器为何能如此迅速(即 DNS 预提取、V8 JavaScript 引擎和 DOM 绑定)的技术视频。
前面鼓吹了一番Chrome,一些是引用官网介绍。当然,每个东西不可能都是十全十美的,Chrome浏览器也是,有优点也有缺点。
优点:简约但不简单,Webkit内核开发,打开网页的速度很快,界面简洁,插件多,搜索简单,操作和设置方便,Javascript脚本执行效率高。
缺点:最大缺点就是占用的内存比较大(用空间换时间嘛)
仅凭以上的优点完全不足以说明它是个神器,稍后我会主要说说Chrome的具体使用,包括日常使用技巧以及怎么调试CSS。
在大学的时候,我尝试着用各种浏览器,IE、360、搜狗、Opera等。最开始大一用得最多的就是360浏览器,觉得这个东西好多功能啊,各种花哨。在大学大三的时候和一些合得来的同学重组了大学寝室,寝室的基友都甚是好学,天天都是宅到寝室学习,大多都是搞程序,我们都是一个专业,我也自热而然地也走上了程序之路。其中就有一位好基友young推荐我使用Chrome浏览器,说用起来很爽,鉴于基友的推荐,我决定用一下,开始Chrome给我的感觉就是好简约,感觉功能很单一,和360浏览器比起来感觉功能太单一了,和Opera差不多,但由于笔记本显示器较小,用这种比较简约的浏览器更适合,360浏览器一大推工具栏,严重影响了我的浏览视野。
我一直做.NET开发,肯定避免不了编写Javascript代码,最开始自己完全不会调试,所有的调试都是alert,调试的时候都是修改程序,加上alert,然后保存,再刷新页面,现在想想都觉得自己很二。
在不知道怎么调试JS的情况下,编写前端Javascript代码的效率是比较低的(排除高手)。以前自己对Javascript并不是很熟悉,又受了一些人的误导,说Javascript简单不用怎么学,看看帮助文档就会,所以自己忽略了Javascript的学习,经常JS代码出了问题不知道是怎么回事,自己就在那里不断地alert。后来又是在寝室的基友(CDU9-321许书记)指导下我学会了用Chrome浏览来调试Javascript,会用Chrome调试后我又研究了IE和Firefox,发现都可以调试Javascript只是自己以前不知道,太孤陋寡闻了。
进入正文
先说说Chrome怎么调试CSS,然后说一说Chrome一些很有用很好用的地方。
调试CSS
审查元素,定位到元素的HTML,这个时候左键双击便可以编辑HTML效果如下,这个时候你可以修改里面的任何HTML内容。如果右键效果如上图,右键会弹出右键菜单,上面有很多操作,常用的一般都是拷贝HTML,编辑HTML,和删除HTML,比如遇到一个不可关闭的弹窗广告,你可以立即右键审查元素,然后直接Delete这个节点。还有就是强大的断点,h还可以查看这个元素的所有属性。
当选中元素的时候,Chrome调试窗口会详细显示这个节点的相关信息,效果如下图
CSS的相关调试,点击如图的位置,可以看到,这个节点(Google的那个输入框)他的相关CSS,如果是一个标签,他又hover属性,你可以勾选上面的hover,a标签hover的样式会立即在页面上呈现出来,照此其他的也是,只要你设置了他的那个样式。当天你可以给这个元素在这里添加css样式,去除一些样式。可以添加元素内联样式,也可以添加某个class的样式。
这里你可以看到那些是元素才class样式,哪些是元素的内联样式,如果是class右边会显示是哪个个style文件,第多少行,你可以直接点击跳转到CSS文件里面,我这里截图不全,没有截取到。
微调属性值,有时自己没有进行过精确计算,而只是需要大概的margin或padding值,这里需要微调,不可能不断编辑值然后保存刷新页面看效果。
第二个Computed,这个单词是计算推算的意思,这里就是显示这个元素border margin 等等信息的。
第三个主要显示这个元素绑定有哪些事件,点开后你就会看到,这个的详细应用大家可以研究下,在开发中还是很有用的。
关于DOM BreakPoints 和Properties大家自己研究把,如果想说我估计这个就是长篇大论了,从英文就可以看出它是什么意思了。Properties是很有用的,可以看到元素的所有属性,也许里面有你想要找的值,有必要可以看看,自己又是忘记它的某个属性了,就可以点开看下,然后通过js取对应的值。
关于Javascript的调试,这个完全就是长篇大论了,大家参考一下下面的资料,一个是google developer给出的chrome使用教程,这个是官方文档是非常详细的。
http://www.zi-han.net/developer/607.html
https://developers.google.com/chrome-developer-tools/
Chrome在CSS和JS的调试上很强大,很多地方都比firefox要好用,这个也主要看个人习惯,我有时也会用用firefox,firefox的有些调试功能还是不错的。
Chrome在书签管理上也比较傲强大,你的所浏览记录Chrome是保存到它服务器上的,这个需要注意,有时浏览一些敏感信息的时候大家可以打开Chrome的隐身模式,快捷键Ctrl+shift+N 。