2：了解网页F12开发者工具

难度系数：简单

网页F12开发者工具是现代浏览器内置的强大工具，按下F12键或在浏览器菜单中开启后，能打开一个包含多种功能面板的控制台界面。

F12开发者工具功能很多且强大！它可以帮你查看网页的源代码、调试样式和脚本、分析网络请求、排查错误，甚至模拟手机屏幕。

当你浏览别人精美的网站时，不妨试试F12进行研究学习。

你的展览馆已经搭好了框架，但微光娘逛了一圈之后，发现有些同学的展览馆内容更丰富、排版也更好看。

“他们是怎么做到的？“微光娘歪着头问。

其实很简单——打开他们的网页，按下F12，所有的秘密都会展现在你眼前。当然，F12能做的事情远不止”偷看”别人的网页，它更是你调试自己页面、排查问题的得力助手。

1. 打开开发者工具，说说开发者工具的基础面板有哪些（至少列出5个）？然后自行了解一下它们各自的作用。在你列出的面板中，你觉得哪个对前端开发最有用？为什么？

2. 打开你在第一题中制作的展览馆页面，在Elements面板中找到你写的标题和段落。试着双击修改页面上的一些文字，观察变化——然后刷新页面，发生了什么？想一想为什么？另外，在B站中打开控制台(Console)之后登入你的B站账号，你发现了什么？然后在你的个人空间中进行元素修改，向我们展示一下暂时的百万关注和点赞！（需要截图）

3. 什么是Cookie？它解决了什么问题？如何查看Cookie？以B站为例，找一两个你觉得有意思的Cookie字段，猜猜它是做什么用的。如果有人拿到了你的Cookie，可能会发生什么？

4. 切换到Network面板，刷新任意网页，观察产生的请求。这些请求大部分是GET还是POST？找到一个状态码为200的请求和一个不是200的请求（如404），说说分别代表什么含义。点开一条请求，在Response Headers中找到Content-Type字段，它告诉了我们什么？

注：使用md记录做题过程，保存为pdf文件并提交。

• Chrome DevTools 官方文档
• HTTP 状态码详解 | MDN
• Cookie 到底是什么？

• 控制台为什么显示报错
• 如何找到与要修改内容对应的代码
• 如何打开开发者工具
• 网络(Network)面板里的都是什么？
• 什么是HTTP？什么是HTTPS？
• 如何抓包？
• …

提交点这里

出题人：  > 1

QQ：3625607718

邮箱：3625607718@qq.com