姬小光前端兴趣班【第010期】- 浏览器开发工具

前面几期我们学习了切图大法，我相信只要你认真学完，就可以立即派上用场。比如可以将你喜欢的图片切成个人主页，也可以将贺卡图片做成带链接的邮件等等。

这一期我们再学习一个立马可以用上的技能，即浏览器开发工具。

浏览器开发工具

浏览器开发工具主要方便我们调试页面，可以即时看到调整的效果，也方便我们定位问题。

目前主流的工具主要是 Chrome 或 Safari 的开发工具，IE 的开发工具，还有火狐浏览器的 Firebug 插件等。

我们主要了解一下 Chrome 开发工具，其他工具大同小异，可以自己慢慢摸索，网上也有很多文章。

首先我们来看一下界面，在浏览器窗口中按 F12 健，或者在某个页面元素上点击右键“审查元素”即可出现如下界面（为方便手机浏览，窗口已缩小）：

大家可以看到，这个开发工具有很多面板，它们可以用来调试页面的结构、样式、脚本、资源，以及加载速度，本地存储等等。

作为入门的例子，我们只小试一下 Elements 面板，即元素的修改。

说一个常见的场景：产品经理和设计师们经常会找到前端说，看一下这里能放多少个字，溢出什么样，两行什么效果等等。

那么我来教你，把鼠标放到想要调整的文字上，右键“审查元素”：

大家可以看到，在展开的 Elements 面板中已经可以看到当前这个元素的结构了。根据前面几期的学习，你也知道这是一个链接元素。

下面，双击箭头所指的文字部分：

可以看到文字已经变成了可编辑的状态，现在我们来输入一些文字：

然后在其他地方随便点击一下则是确认此处的编辑，我们再看页面中的文字已经发生了变化：

利用这个简单的功能，就可以非常方便滴测试溢出或者能放几个字这种简单问题，有需要的同学可以立即尝试一下。

Chrome 开发工具还有很多强大的功能，本着兴趣班循序渐进的原则，今天就到此为止啦～