Failed to parse SourceMap:

2024-02-20 08:10
文章标签 failed parse sourcemap

本文主要是介绍Failed to parse SourceMap:,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

首先先说无脑的解决办法:

在所有应用到map文件的地方都加上/path/to

 

以下转载自:https://blog.csdn.net/sundacheng1989/article/details/51118865

了解一下历史

这里简单说一下SourceMap这项技术。在现在写网站的时候,如果有很多的javascript文件,拿ASP.NET NVC来说,在渲染内容到客户端浏览器的时候,如果你使用一些Bundle类的话,能够合并并且压缩那些js文件,并且去除其中的空格等元素,从而减小文件的容量,提高网页的反应速度。但是这样一样造成的问题就是在浏览器端无法对js文件进行调试,因为进过压缩的文件很紧凑,没有空格与换行。

 

这里先说一个额外的话题,就是怎么把压缩后的js文件还原成格式化的代码。这里有一个在线的工具就可以完成。http://jsbeautifier.org/,打开网址后,输入压缩后的js代码,然后点击Ctrl+Enter,自动就给你格式化了,很方便。

 

上边说到的是如何格式化,就是把代码拷贝出来进行格式化,跟调试还不一样。想在调试的时候能在浏览器端显示格式化的js代码,这里就引入了SourceMap的概念。

 

概括来讲,SourceMap就是如何把压缩后的js代码映射成格式化代码的方法。当你在Production环境部署代码的时候,伴随着压缩与优化话的js代码,还要有一个包含原始js代码的sourcemap文件。当客户端浏览器Chrome在收到这个压缩后的js文件后,它会自动的去寻找服务器上相关的sourcmap文件并把压缩的js代码转换成格式规范的js代码。

 

Chrome要实现这个功能,首先要开启这个设置。在Dev Tool的设置框中,勾选相应的项。注意,不是Chrome的设置页面,是DevTool的设置页面。

这里来说一说SourceMap到底是怎么工作的。首先我们要有相应的工具对已有的js文件进行压缩,压缩的同时会产生相应的sourcemap文件,然后再部署到服务器就可以了。目前不是所有的压缩工具都符合要求,比如说ASP.NET MVC里边的那个Bundle类就不可以。现在最常用的是Closure compiler,在工具产生压缩js文件之后,会在文件头部加上这样一行代码,指明了服务器上的哪个文件是map文件。这个文件只有在浏览器打开了上边提到的DevTool里边SourceMap的设置,才会下载到本地,否则不会下载。这里就显示出了其优势,一般用户不用下载,其网页只用优化后的js文件,响应速度快。对于开发者,发者可以下载map文件进行调试。

现在回到最初的问题,为什么我的网站会抛出那个异常?

看提示可以明白,是因为网站引用的第三方的angular是压缩后的版本,而且有sourcemap的指向信息,而我的网站没有相应的map文件,所以抛出此异常。

这篇关于Failed to parse SourceMap:的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/727544

相关文章

android java.io.IOException: open failed: ENOENT (No such file or directory)-api23+权限受权

问题描述 在安卓上,清单明明已经受权了读写文件权限,但偏偏就是创建不了目录和文件 调用mkdirs()总是返回false. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.READ_E

tiptap parseHTML renderHTML 使用

要在 Tiptap 中使用 parseHTML 和 renderHTML,可以通过创建自定义扩展来解析和渲染自定义的 HTML 元素。这两个方法允许你定义如何将 HTML 解析为 ProseMirror 文档节点以及如何将 ProseMirror 的文档节点渲染为 HTML。 1. parseHTML parseHTML 用于将 HTML 元素解析为 ProseMirror 节点。在自定义扩展

UserWarning: mkl-service package failed to import

安装完成anaconda,并设置了两个环境变量  之后再控制台运行python环境,输入import numpy as np,提示错误 D:\InstallFolder\Anaconda3\lib\site-packages\numpy\__init__.py:143: UserWarning: mkl-service package failed to import, therefore

Python安装llama库出错“metadata-generation-failed”

Python安装llama库出错“metadata-generation-failed” 1. 安装llama库时出错2. 定位问题1. 去官网下载llama包 2.修改配置文件2.1 解压文件2.2 修改配置文件 3. 本地安装文件 1. 安装llama库时出错 2. 定位问题 根据查到的资料,发现时llama包中的execfile函数已经被下线了,需要我们手动修改代码后

Typora配置PicGo时,提示Failed to fetch

Typora配置PicGo时,提示Failed to fetch 两者配置的端口不一致造成的 打开Typora,选择文件-偏好设置-图像-验证图片上传选项,点击验证图片上传选项 会提示错误:Failed to fetch,此时可以发现typora中设置的上传端口为36677 打开PigGo,选择PicGo设置-设置server,会发现监听端口为36678 修改监听接口为366

Tomcat启动报错:transport error 202: bind failed: Address already in use

Tomcat启动报错:transport error 202: bind failed: Address already in use 了,上网查找了下面这篇文章。也是一种解决办法。 下文来自:http://blog.csdn.net/sam031503/article/details/7037033 tomcat 启动日志报出以下错误:  ERROR: transport err

SpringBoot启动报错Failed to determine a suitable driver class

两种解决办法 1.在Application类上加 ` @EnableAutoConfiguration(exclude={DataSourceAutoConfiguration.class}) package com.example.demo3;import org.springframework.boot.SpringApplication;import org.springframewo

Failed to pull selection解决办法

今天在使用DDMS导出文档到PC端的时候,明明在file explorer里面有文件,导出时候就是失败,出现了“Failed to pull selection”错误。百度了一下,还是重启Eclipse最靠谱。

JavaBug系列- Failed to load driver class com.mysql.cj.jdbc.Driver in either of HikariConfig class load

JavaBug系列之Mysql驱动问题 Java医生一、关于错误信息二、如何解决问题 Java医生 本系列记录常见Bug,以及诊断过程和原因 Java/一对一零基础辅导/企业项目一对一辅导/日常Bug解决/代码讲解/毕业设计等 V:study_51ctofx 一、关于错误信息 APPLICATION FAILED TO START Description: Fai

王立平--Failed to push selection: Read-only file system

往android模拟器导入资源,失败。提示:只读文件、 mnt是只读文件。应点击sdcard,,在导入