F12控制台简单介绍，一般开发中常用的一套Chrome浏览器网页制作调试工具。（以谷歌浏览器为例）谷歌官方文档访问键盘按F12或右键->检查工具窗口Console是一个多功能集合，以谷歌浏览器为例细分为Elements：页面元素、DOM树结构,stylepanelConsole：这个其实叫控制台面板，用来记录页面执行的信息（console语句需要在代码中传入）Sources：源代码面板Network：在Network面板中，可以查看资源requestedthroughthenetwork请求这些资源的详细信息和耗时性能：页面加载的详细信息，通常用于分析网页的性能。内存：主要显示页面上JS对象和关联的DOM节点的内存分布情况。应用：记录网页加载的所有资源，包括存储信息、缓存信息以及页面使用的图片、字体、脚本、样式等。Security：用于检测当前页面的安全性Audits：审计面板会分析页面的加载情况，然后给出改进页面性能的建议。常用面板开发介绍以下面板以百度首页为例。其中：你可以通过鼠标在DOM结构中选择你要选择的元素，也可以在页面上通过激活左上角的箭头来选择。样式栏从上到下，优先级从高到低，无论是DOM栏还是样式栏，都可以实时编辑实时显示效果，但不会更改源码。控制台显示js代码打印的信息：常见的有日志打印和错误打印，也可以执行js语句sources。断点调试，点击相应的行号即可。如果文件编码是压缩的，可以如下图格式化。格式化后，networkChromeDevTools的Network面板主要用于衡量当前网页的网络性能，它记录了当前网页每次网络操作的信息，包括时间数据、HTTP请求、返回数据等。如果只想看http请求，选择文件1处的XHR，点击对应名称，打开详细信息面板。下面是一个http请求的例子：在headers栏，可以看到请求地址，方法，参数，请求头，响应头在预览中，可以看到返回应用本地存储的格式化界面，你可以从LocalStorage窗格中检查、修改和删除键值对(KVP)。双击一个键或值可以修改相应的值。双击空单元格以添加新的KVP。单击KVP，然后按删除按钮(x)删除KVP。只需单击一下（干净），即可从清除存储窗格中擦除所有本地存储数据。如果您以创建、删除或修改KVP的方式与页面交互，您将不会看到这些更改实时更新。单击刷新按钮（refresh）来查看您的更改。LocalStorage、Cookies和LocalStorage大致相同
