Chrome 浏览器的 source-map 功能

时间 2019-11-07

标签 chrome 浏览器 source map 功能栏目 Chrome 繁體版

原文原文链接

webpack 很是火，它提供的 HMR(hot module replacement) 功能很是棒，修改代码无需刷新页面。那么在 webpack 出现以前，有什么好的方法呢。css

做为前端开发，Chrome 应该是你们最喜欢的浏览器之一，调试代码很是方便。前端

这篇文章主要介绍下，Chrome 浏览器自带的 source-map 功能。webpack

若是你的项目已经用 webpack 了，那就不太须要使用这个功能了，webpack 提供的 HMR 功能，开发起来很方便。git

github

右键选择 Add Folder to Workspaceweb

并容许访问权限chrome

右键选择 Map to Network Resource...，选择对应的文件。浏览器

如此便已有了 source-map 功能sass

只须要创建某个 map 的文件，Chrome 会为把整个目录下的文件都创建 map 关系。编辑器

选择某个文件，修改代码，cmd + s 保存，而后你会发现编辑器里的代码也更新了。

或者，更新编辑器里的代码，cmd + s 保存，网页中的代码也相应的更新了。

固然它并无 webpack 这样的 HMR 功能，若是想看到代码更新后的效果，仍是须要刷新页面的。

可能在对于 js 代码来讲以上的 map 用处彷佛并不大。

因此这个功能大可能是在修改 css 代码的时候使用，

你能够直接看着页面，在控制台修改 css 代码就行了，都不须要去修改编辑器里的文件了。

Chrome 的这个功能还支持 sass，能够 map 到源代码，若是写 sass 的话，强力推荐。

其实你还能够在控制台删除，增长文件，参考 Workspaces - Persistent authoring in the DevTools。