前端开发工具的相关介绍 vscode chrome

前端开发工具的相关介绍

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

http://tool.css-js.com/

本地的，我一直是使用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 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。

有时间我去总结过来
人家写的真棒https://www.jianshu.com/p/b63e6b7df8bf