本文属 xxKarina 原创,转载请注明
个人博客地址: https://xxkarina.github.io/
学习前端,首要掌握的就是浏览器,编辑器,还有前端涉及的语言,那对于开发者来说,chrome 开发者工具几乎是首选,你们会用了吗?熟悉使用开发工具,不管是对于开发者自身还是对于开发本身都是十分受益的一件事情,现在我们就一起来看看它到底是个什么东西吧
文章要点:
打开你的浏览器,按下 F12 键或者 ctrl+shift+i,你会发现这样一个东西
从页面标题 Developer Tools 我们就可以知道,这个就是我们要的 Chrome 开发者工具,它是一套内置在谷歌浏览器的 web 开发和调试工具,一般的浏览器都会有开发者工具,使用方式都是大同小异,此篇文章都是围绕着谷歌浏览器展开,我们初略的将其划分为 5 各部分,分别是
title 部分,这部分只是简单的展示你当前的位置信息,标志你所在的位置,只需知道即可
导航部分,这部分是很重要的部分,几乎涵盖你可以操纵的全部功能模块,我们一部分一部分来探究
首先关于界面模块,我们可以选择将开发者工具嵌入我们的主界面,也可以独立出来
选择页面右上角主菜单的 dock side 侧邻区,选择自己需要的位置即可
下面的分别是:
这里就不逐个展示啦,感兴趣的童鞋可以尝试下哦,蛮有趣的
animations ——动画;coverage ——范围;JavaScript profiler ——js 分析器
layers ——层;network conditions ——网络条件;quick source ——快速源
remote devices ——远程设备;rendering ——渲染;request blocking ——请求阻塞
search ——搜索;sensors ——传感器;what's new ——什么是新的
开发者工具是一套内置在浏览器的 Web 开发和调试工具,开发者可以使用它来调试,解析开发的网站,我们都知道 Web 开发的效果会在浏览器上展现
浏览器和服务器交互的过程,就是 "一次性" 的过程,在页面初始化的时候就会将 html 页面以及它的依赖项全部下载在浏览器上,然后经过浏览器的解析之后就可以渲染出页面的效果,就是基于这点,我们就有了深入剖析代码运行过程的机会,而这个机会就是通过开发者工具展现出来
如今为了更好的用户体验,将受众扩大,不少网站纷纷都采用 响应式布局 ,那在这种情况下,为了更好的开发,chrome 开发者工具给我们提供了一个设备模式
使用设备模式,我们就可以模拟移动设备,来构建移动优先,完全响应式的网站,可以在浏览器上近似的展现你的网站在移动设备上的显示效果,这对于我们开发者来说无疑是一个很好的礼物
设备模式的使用:
选择模式的使用:
有时候我们想在一个页面直接查看某部分的代码,虽然可以鼠标悬停在上面,然后右键检查,但是这样不是很灵活,如果我们想随心的查看代码,就可以使用浏览器提供的选择模式(快捷键 Ctrl+shift+C)
这样就可以很方便的查看我们的代码了
知道了这些基本的辅助操作,我们就可以开始着手我们的项目啦
element 面板:
element 面板不仅可以查看我们的代码,还可以进行即时性的更改(双击需要更改的元素),可以实现自由的更改样式和布局
比如单击: hov 就可以模拟当前选定元素的
态
- hover activity focus activited
单击: cls 就可以元素的类名等'
)
- margin padding border
是不是和很神奇,哈哈哈,js 断点,Java 断点,c++ 断点,原来你(DOM)也有断点啊,真是白认识了这么多年,选中元素,鼠标右键,选中菜单中的 Break on,
刷新你的页面,当该元素的属性发生变化时,就会暂停脚本的执行,并且定位到改变发生的地方。是不是很棒呢
- Attributes modifications
console 面板:
控制面板功能其实很强大的,使用起来又十分的方便,之前就是在控制面板编辑了一些脚本,完成了教学质量评价,感兴趣的童鞋看过来, 教学评估
功能:
source 面板:
这个面板的功能十分的强大,都是很实用的
我们先来看两张图
是不是发现了什么呢,没错,这个就是 workspace 的强大功能了,实现将浏览器的更改同步到本地,这样就可以省去界面切换和粘贴复制的繁琐步骤了,就相当于有个文件缓冲区,设置关联之后,一旦将更改保存,则缓冲文件就会覆盖原先的文件,实现同步的效果,整个期间,可以一直在浏览器界面,不经过外界
怎么操作呢?
首先,打开你的 source 面板
然后,选中你要操作的文件,右键选中菜单中的授予权限之后就可以关联了,依然是右键,选中菜单的 map to file system
- add floder to workspace
上面不是提到了 DOM 树其实也是可以打断点的吗,那既然可以打断点,肯定就会有一个调试模块啊,而 source 的 watch 窗格正好就是这个模块
这里可以打断点、增加监听的变量、删除变量、更新变量还有就是常规的调试功能,按照窗格上面的说明来就可以了,用起来还是蛮不错的
network 面板:
面板主要的工具也是常规的几个,
掌握了这些你就可以从一个小白变成一个不是那么白的小白啦!
来源: http://www.jianshu.com/p/ac14fdd7df95