开发者工具原创

这是一个非常重要的知识点，因为我要给大家讲解一下我们Chrome的开发者工具，这个工具呢，可是我们前端人员必备良药啊，是必备工具对吧？那我们以后呢，出了问题，我们首先第一反应不是请求别人的帮助，而是呢，打开我们的调试工具，自己去排错一下，因为自己解决的效率会更高一些。好了，那现在呢，因为我们后面呢，可能写的代码比较多的时候呢，我再去教给大家一些排除的方法，而在这儿呢，我只是先教给大家怎么去使用这个工具，先认识一下它好不好，那么打开这个工具快捷键呢，我们可以用这么来做，第一个呢，你可以按一下F12键。能点完F12这个工具就可以出来了，或者是呢，你可以通过右键里面有一个叫做检查，可以还有个快捷键呢，是ctrl shift加上I键都行，点开完之后，Now是不是已经在这已经能够看到了，我的呢，默认的是在我的下方。每个同学不一样，那你可以点一下，我们左边呢，有这么两个按钮，第一个是这三个点的，还有一个小叉号，这个叉号的具体用法我就不说了，对吧，你都懂你懂的，然后呢，这个小三个小点的意思就说是可以来控制我点完它之后呢，你看这里面有一个叫做你看在这个地方是不是我的调试工具在我整个屏幕的正下方呀，如果这个地方在这儿，你看到这儿就是说在我屏幕的右侧了，来我展开你看点一下，喏，这个工具是不是在我屏幕中的右侧了，这个适合于一些宽屏的同学啊，啊还有一个呢，是在左侧，那这个我估计好多同学就不不舒服了，好，那还有什么东西呢？点开完之后，我们最为常用的，还有这个是分开的啊，分开也不常用，我们直接就用我们这个在我们的这个do To Bottom在底侧，这是最常用的一种写法，能是这个工具里使用的好，那再有一个呢，就说是我们会发现这个代码呢，其实非常有意思，你看到左侧了吗？你看H码，也就说左侧是不是只有结构啊，就是我们的HH。

DML呀，那右侧呢，我们会发现，诶，果然只有我们的CSS，你看这个工具是不是典型的我们的结构与样式相分离呀，是它们分开的，哎，这两个结构要注意一下啊。

那尤其我们以后写代码也是要分开的，那在这里面我们看完毕之后呢，需要你去了解这么几个地方，那我想要看某个样式到底合不合适，你看比如说我想要知这个收藏本我是不是个链接呀，你只需要拿这个小箭头去点它一下，然我们左侧呢，也有两个小箭头，两个小符号，第一个呢，这个呢，我们叫做选择工具小黑，那你只要拿着我们的小黑点一下小黑，然后呢，到我们这地方去点一下收藏版文点一下，诶，它会快速的定位到这个链接上去，能是不是已经有了，而且我们发现左侧是选定了这个标签，右侧呢是显示出了这个标签的样式，然后这个A链接是不是只写了一个去掉下划线的样子啊，哎，这是我们说的它这个方法，这叫小黑啊小黑好了，如果我们想再选择标题，再点一下这个小箭头到这个线。

标题上点一下，然是不是这个就出来了，它呢有两个样式分别叫title和ta center，然这个呢是title，这是t center是不是都能够看到他们了，哎，没问题，我们都能看到想要的样子，这是这一个好了，还有第二个按钮呢，不要点，有同学如果你不小心点了一下之后呢，会成这个样子，诶老师这怎么成了手机了，确实手机啊，好你比如说还有iPhone叉呢，对不对，IPhone等等的iPhone了，还真有，那么选完之后呢，就成了iPhone叉手机好，我们这样现在呢，不牵扯到里面，如果你是不小心点的，你再不小心点回来就行了，再点一次就回到我们PC端的页面啊，那个移动端到我们后面学完之后再告诉你好吧，哎，然后里面这些选项呢，我们现在都用不着，我们学GS之后会用啊，我们只用这个elements就行了，叫做元素，这一个是不是都是我们N面的元素了，这点注意，然后再一个呢，就是这个视图啊。长一个快捷键啊，这个视图如果字你就比较小的话，你可以呢，按照CTRL加滚轮放大能是不是这个字放大，我们看着就会更清晰了，CTRL加滚轮放大和缩小啊，或者是呢，你要点一下在这里面CTRL加加号放大，CTRL加加号缩小都是可以的，但是前提不要点，不要定错位置了，你呢应该是定到了什么呀，定到了这个里面去调试工具里面去，再去按我们的键盘这个符号就可以了啊，你要是定到这里面去，就会把这个页面给它放大缩小了，这不行，我们是指在调试工具里面去点一下再调试，好吧？哎，这是我们讲的开发工具里面最常见的这么几个啊好，考试架滚轮可以放大缩小，左边是H，右边是C，再有一个呢，就是说是我们可以CTRL加零复原浏览器的大小，也就说你如果调大了调小了，你可以把光标定在这，按照CTRL加零键快速的再复原为原先的大小就好了啊，这个呢，我们讲完毕之后呢，我再教给大家我们这里面比较好用的几个小细节，其中第一个当我选完he之后，咱们前面说过啊。

第一个就是咱们说，哎，这个标题到是多大呀，刚才咱们是不是已经纠结了好多呀，一会写二十四一会写30，那么我们你如其猜，还不如自己来调一下，你看我把光标选用这个一之后，你看他along center，然后title一个 font size30，那这个30呢，你可以把光标定进去一定，哇塞。

竟然可以改呢，果然是可以改的啊，怎么改呢？你把光标定进去之后，注意按我们键盘上是不是有四个上下左右四个箭头呀，按着上箭头可以变大，然后这不是30吗？我按一下上箭头会变成三十一三十二三十三三十四，当它越来越大，你会发现上面的字会越来越大，那到底多大，你自己换一换，你喜欢按一下下箭头可以缩小，还再小再小再小，好写到这，哎，可以了，不要再动了啊，我知道了是28像素，那你就把28复制一份到我们的结构里面去，咱们结构里面有多少呢？你看刚刚写的时候是30啊，你就直接改成28就行了，改完之后保存再刷新，哎，是不是已经28了啊，你要注意啊，你在这儿改的，你看你你这样虽然改很大了，注意啊，你再一刷新它还是会回去的，他只是帮你调试。

真正的他不会改代码，你需要还是手动回来再改代码的。好，这一点能明白吗？啊，原来是可以修改大小的啊好，还可以改什么呢？比如说你看我选完它之后呢，这是不是一个颜色呀，你报光标一点，点完之后啊拍选完之后，这是不是一个900啊，如果这个颜色呢，你不想要了，你可以在它颜色身上一点哦会竟然会调开一个调色板，你可以在里面选颜色，哎，喜欢什么样的颜色，你选一选上面跟着一起来变，我比如说我想要这种颜色，蓝蓝蓝，那上面是不是已经变成我们想要的蓝色了，如果你满意了啊，如果你满意，我用绿色吧，满意了敲一下回车确认一下，那还是老规矩，一刷新是不是就没了，在刷新之前把这个颜色呢，复制一份到我们结构里面去粘贴代码，一刷新是不是就可以了，那这是我们说的这个调试工具啊，好了，那么我想我想复制一下到哪去呢？因为我们页面中的代码是不是太多太多了，我一行一行的找很费劲，那怎么办呢？你看啊，我这行代码批代码在哪呢？给我鼠标来OK啊走走走，诶给你开个玩笑来，转了个小圈在这呢。

看到这儿有个31了吗？31的意思告诉你这行代码是在第31行上，那你只需要快速的找到我们的31哦，在这儿呢，果然我这个皮泡是不是在这儿了，你只需要把这个颜色呢给它改一改就可以了，改成我们想要的颜色是不是就可以改过来了？再比如说我想段落啊，我想段落的行高在哪个地方呢？我单击一下，随便找一个段落P标签，你看是不是一个行高26像素啊，我想给他更改更改一下，那怎么办呢？你看这有个叫做48。看到了吗？哎，在第48行上，我们找找是不是走啊走啊，走48，哦，果然是不是在这儿呢？哎，这个工具不得不说太强大了，当然了，仅仅如此吗？不仅仅如此，它还有更加强大的地方，包括学GS，我们也会天天用它，所以说这个工具呢，非常重要，非常厉害。非常非常是吧，哎，好了，那在这里面呢，我只是教给大家怎么去。

认识和简单的来认识了一下，简单使用一下这个工具具体的调错的一些方法和思路啊，哎，当我们后面代码写的多了之后呢，我再教给大家。