前端开发工具的相关介绍
vscode
这个蛮好用的 调试控制台 装插件 运行环境 还是轻量级的
emmet 的使用
你可以使用相关的语法 快速生成你想要的代码
编辑器拓展的下载网站 https://www.emmet.io/download/
1. html文件 ! 按tab键出现基本的页面结构
2. 相应的标签也是 写上基本的 按tab
3. 带有class 例如： a.name 按tab <a class="name"> </a>
4. 带有id 例如： a#name 按tab <a id="name" ></a>
5. 层级管理 例如： div>p 按tab <div><p></p></div>
6. 添加数量 例如 div>p*3 按tab <div><p></p><p></p><p></p></div>
7. 填充文本 p>lorem*5 按tab 里面就会有很多文本
JS压缩和解压缩工具
现在的很多JS插件都是采用min压缩格式提供的，以提高其网络传输速度，但问题来了，我们有时需要查看被压缩的js文件的源码，而另一些时候我们又需要将我们写的js文件进行压缩，这里提供几种方式：
在线的压缩解压缩工具：
http://tool.oschina.net/jscompress
本地的，我一直是使用notepad 的一个JSTool工具来实现的，该工具能很容易的实现对JS文件的压缩和解压缩
chrome的相关调试
Chrome一共有8个功能子集。每一个图标点击后都会打开相应的调试面板，帮助您获取各种不同的信息，如 DOM 树、资源占用情况、页面相关的脚本等。通过 Ctrl+[ 和 Ctrl+] 键，可以在这些项之间进行切换。每个模块及其主要功能为：
1.Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
2.Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
3.Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。
4.TimeLine 标签页： 用于查看脚本的执行时间、页面元素渲染时间等信息。
5.Profiles 标签页：用于查看 CPU 执行时间与内存占用等信息。
6.Resource 标签页：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。
7.Audits 标签页：分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案，
用于优化前端页面，加速网页加载速度等。
8.Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。