前言
前段时间给公司分享前端技术， 因为部门中不光是前端，还有后端、数据。 所以选择了分享 浏览器 相关的， 这个不光前端每天在用，研发人员日常也都离不开使用浏览器。 在准备过程中，学习到了两个让我很惊喜的开发技巧，顿感多年前端白干，相见恨晚， 今天先分享浏览器的 workspaces 功能， 完成一个面向浏览器编程， 无限修改浏览器中的样式，即可修改本地代码中样式的功能
1、 源代码面板的 Workspaces
提到源代码管理面板， 大家想到的肯定都是打断点，进行源码调试的地方， 实际上这里的功能远不止于此。 这里浏览器其实还给内置了文件系统， 可以让我们在浏览器中编辑代码，改页面的同时更改本地代码，这不就是面向浏览器编程吗。
Workspaces是什么: 工作区（Workspaces）是源代码管理面板中的一个概念，它提供了一种组织和管理项目代码的方式。一个工作区可以包含一个或多个相关的代码仓库，并帮助团队协作、版本控制和代码审查。
2、 常用的开发模式
讲这个之前，先简单回顾一下，我们之前的开发、包括学习css及html的时候，是不是都是左边一个编辑器，右边一个浏览器，在浏览器的元素审查中，找到元素，对元素进行样式调整后，在复制到编辑器中， 保存，然后回到页面来刷新。（应该不会还有人连浏览器上可以调整完代码，再复制到编辑器吧～）
我们先上一个图，演示一下之前的模式， 上一个最简单的html、css代码
演示如
代码如下
<style> .box { width: 100px; height: 300px; background-color: aqua; color: blue; } ul { } ul li { color: red; font-size: 20px; } </style> <body> <div class="box">hello world</div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body>
3. 理想的开发模式
那么， 我们可以直接在浏览器中编辑好，然后不打开编辑器保存代码吗？ 答案是可以的， 就是用浏览器源代码面板中的 文件系统功能
添加文件的时候，文件夹最好是英文命名， 然后浏览器会有个提示， 是否允许浏览器有访问权限， 点击允许
我们把刚才新建的包含html文件的文件夹添加到这里，然后在编辑器中安装 Live-sever 插件，使用live-sever 打开
此时我们打开文件系统中的demo.html 文件，在上面编辑，保存， 页面就会同步刷新，然后看一下代码，也已经进行了修改， 那么到此，浏览器已经可以变身成编辑器了， 我们可以在这里进行 command+p 查找文件， command+f查找， 复制粘贴，基本编辑器的功能都可以在这里使用了
但是到此，我们只不过是把编辑器的功能搬到了浏览器， 还是没有很简化我的操作，像我们一开始讲的， 如果我们可以在元素审查的时候更改样式， 直接去修改代码可以实现吗， 答案也是可以的。
为了能一边看元素审查面板，一边看源代码面板。我们把源代码面板移到底部
此时更改，样式文件，会发现，无法生效， 原因是， 如果想通过元素审查里面直接更改样式， 需要我们的样式文件不能是内部样式表，而是外部引入，原理是，修改样式时，浏览器会发送socket请求给html，并且修改html中的css引用，并且会发送新的css引用链接，下面我们会在看这段脚本解释这里。现在我们先把代码修改成link导入，再次启动live sever服务
// html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <link rel="stylesheet" href="./index.css" /> <body> <div class="box">hello world</div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html // css .box { width: 300px; height: 400px; background-color: #ea269b; color: #3748a7; font-size: 30px; } ul li { color: #00ff33; font-size: 20px; }
此时我们再次进行审查元素， 修改样式，看下面的效果
