大家要善于利用浏览器为我们提供的config
Element 与 Console应该是常见，并且我们调试的时候经常使用，然而其它每个都有极其重要的作用，
就像NetWork 我们做前后端交互的时候，都会根据NetWork返回的数据查看接口有什么问题，常见的问题是吧，400，500这些状态码，方便我们找到问题并作出相应的解决，这些小伙伴可以去查一下更大的用法，今天教大家使用Sources实现本地CSS热更新，其实用处不大，主要是给学习CSS的朋友更好的测试，因为我们热更新的实现一般都是需要在服务器环境中的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="max-age=31536000">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css"> =>引入css
</head>
<body>
我是会变色的fonts
</body>
</html>
css文件
body{
color: green
}
我们f12 打开控制台 ，调到Sources面板，可以发现我们的资源文件
其实我们在这里是可以直接编辑的，而且已经有热更新了，好比我们在Elements中的style中更改样式一样，当然我们不能在这里编辑，而且刷新完全没了
我们要给浏览器增加修改文件的权限，因为浏览器是没有这些权限的，右键css文件，选择第一个选项，会出来一个文件选择，把我们的编辑的文件夹选中即可
点击允许
此时会有我们的包文件，右键css 选择Map 映射
选择我们要编辑的css文件，此时就可以在编辑器中实现热更新了
网友评论