Web tools

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/austindev/article/details/61919922

Web tools

Sublime 文本编辑器

1. 软件包管理器
2. 安装插件
   ColorPicker – 颜色选择 从调色板中选取颜色，然后通过按 ctrl+shift+c 将其添加至您的 CSS。
   Emmet – 文本编辑器添加一些有用的键盘快捷键和代码段
   HTML-CSS-JS 修饰 – 可以设置 HTML、CSS 和 JS 格式的命令
   Git Gutter – 文件有更改时，可以在 gutter 中添加标记。

设置浏览器扩展程序

1. Emmet Re:View – 查看网站在您每次进行媒体查询时的外观
2. What Font – 说明页面当前使用的字体名称

设置构建工具

1. 实现构建流程最热门的工具是 Gulp 和 Grunt
2. Gulp http://gulpjs.com/
3. Grunt https://gruntjs.com/
4. 使用串连和缩小功能以构建更快速的网站
5. 优化图像
6. 前缀自动补全工具
7. 实时重新加载
   实时重新加载会在您每次做出更改后在浏览器中更新您的网站。只要使用一次，就再也离不开它了。

Chrome DevTools

工作区设置持久化

调试工具上对元素和样式的修改，将直接保存到本地磁盘文件；这样，在浏览器重新刷新后，之前修改仍然有效；
1. 添加本地源文件到工作区
2.

设置 CSS 与 JS 预处理器

1. 调试和修改预处理的内容
   只要您在浏览器中且使用 DevTools 修改您的 CSS 或调试 JavaScript，就会出现一个非常明显的问题：您正在浏览的内容没有反映源，而且不会真的帮助您解决问题。
   为了解决问题，最现代的预处理器支持一种名称为 Source Maps 的功能。

2. Source Maps 的工作方式
   对于生成的每个 CSS 文件，除了编译的 CSS，CSS 预处理器还会生成源映射文件 (.map)。源映射文件是 JSON 文件，会在每个生成的 CSS 声明与源文件相应行之间定义映射。

3. 验证网络服务器可以提供 Source Maps

4. 支持的预处理器

5. Source Maps 与 DevTools

设置命令行快捷键

调试渐进式网络应用

了解安全问题

从任何页面运行代码段

1. 创建代码段 – 请打开 Sources 面板，点击 Snippets 标签，在导航器中点击右键，然后选择 New。
2.

键盘快捷键参考

页面元素和样式查看和编辑

检查动画

设置 DOM 断点

子树修改
属性修改
节点移除

查看元素事件侦听器