草庐IT

javascript - chrome 72 更改了 sourcemap 行为

coder 2025-01-04 原文

我正在为 Chrome 开发 Web 扩展，代码是用 Typescript 编写的，所以我需要源映射。

该扩展与 ParcelJS 捆绑在一起，但我相信我的问题与 bundler 无关。

从 Chrome 70 更新到 72 后，sourcemaps 不再有效。作为一个最小的示例，我可以使用以下代码在 MacOS 14 和 Ubuntu 18.04、Chrome 72 上重现该问题。

这个问题似乎只出现在 Chrome 72 上。不幸的是，在撰写本文时，这是当前的稳定版本:

  • 版本 73.0.3683.27(正式版)测试版(64 位)，没问题
  • 版本 71.0.3578.98(官方构建)稳定的 Chromium 64 位，没问题
  • 版本 72.0.3626.96(官方构建)(64 位)，不工作

为了方便起见，我已经建立了一个github repo。克隆它并运行以下命令(抱歉，我不确定您是否需要全局安装 parcel bundler。我总是这样做是为了方便)

git clone https://github.com/lhk/contentscript_smap.git
cd contentscript_smap
# npm install -g parcel-bundler 
npm install -d
parcel build manifest.json

要遵循 Stackoverflow 规则(如果您链接到代码，您还应该将其包含在您的问题中，该链接有时可能会失效):

content.ts:

console.log('log from typescript')

list .json:

{
    "manifest_version": 2,
    "name": "sourcemaps messed up",
    "version": "0.0.1",
    "description": "",
    "author": "",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "./content.ts"
            ]
        }
    ],
    "permissions": [
        "activeTab",
        "<all_urls>"
    ]
}

package.json:

{
  "name": "contentscript_smap",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lhk/contentscript_smap.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lhk/contentscript_smap/issues"
  },
  "homepage": "https://github.com/lhk/contentscript_smap#readme",
  "dependencies": {
    "parcel-bundler": "^1.11.0",
    "parcel-plugin-web-extension": "^1.5.1",
    "typescript": "^3.3.3"
  }
}

Parcel 将捆绑扩展并生成一个 dist/ 文件夹，您可以从那里将其安装在 Firefox 和 Chrome 中。

Firefox 运行良好(查看内容 .TS 的源代码引用):

Chrome 找不到源 map :

而且不仅仅是控制台只显示编译后的源代码而不是源映射的原始源代码。我在 Chrome 中根本找不到 typescript 代码。

最佳答案

对我来说，这就是解决问题的方法。

  1. 更改 devtool : "source-map"-> "eval-source-map" 在 webpack config 中使用 模式:“开发”。

  2. 添加 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" ma​​nifest.json

除此之外，还要确保通过单击 Chrome Devtools 中的 Add folder to your workspace 将源文件夹(不是 webpack 生成的 dist )链接到 chrome devtools -> 来源 -> 文件系统。

恐怕我没有足够的时间来深入研究这是如何解决问题的。也许我稍后会通过适当的推理更新答案。

关于javascript - chrome 72 更改了 sourcemap 行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54669476/

javascriptsourcemap34strongcodegoogle-chrome-extensiongoogle-chrome-devtoolssource-mapsparceljs

有关javascript - chrome 72 更改了 sourcemap 行为的更多相关文章

  1. ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2

    如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？ 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设

  2. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  3. ruby - Capistrano 3 在任务中更改 ssh_options - 2

    我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe

  4. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  5. ruby - 更改 ActiveRecord 中对象的类 - 2

    假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。

  6. python - 如何读取 MIDI 文件、更改其乐器并将其写回？ - 2

    我想解析一个已经存在的.mid文件，改变它的乐器，例如从“acousticgrandpiano”到“violin”，然后将它保存回去或作为另一个.mid文件。根据我在文档中看到的内容，该乐器通过program_change或patch_change指令进行了更改，但我找不到任何在已经存在的MIDI文件中执行此操作的库.他们似乎都只支持从头开始创建的MIDI文件。 最佳答案 MIDIpackage会为您完成此操作，但具体方法取决于midi文件的原始内容。一个MIDI文件由一个或多个音轨组成，每个音轨是十六个channel中任何一个上的

  7. ruby - Ruby gsub 替换中的行为不一致？ - 2

    两个gsub产生不同的结果。谁能解释一下为什么？代码也可在https://gist.github.com/franklsf95/6c0f8938f28706b5644d获得.ver=9999str="\tCFBundleDevelopmentRegion\n\ten\n\tCFBundleVersion\n\t0.1.190\n\tAppID\n\t000000000000000"putsstr.gsub/(CFBundleVersion\n\t.*\.).*()/,"#{$1}#{ver}#{$2}"puts'--------'putsstr.gsub/(CFBundleVersio

  8. ruby-on-rails - Ruby 中意外的大小写行为 - 2

    我在一段非常简单的代码(如我所想)中得到了一个错误的值:org=4caseorgwhenorg=4val='H'endputsval=>nil请不要生气，我希望我错过了一些非常明显的东西，但我真的想不通。谢谢。 最佳答案 这是典型的Ruby错误。case有两种被调用的方法，一种是你传递一个东西作为分支的基础，另一种是你不传递的东西。如果您确实在case中指定了一个表达式语句然后评估所有其他条件并与===进行比较.在这种情况下org评估为false和org===false显然不是真的。所有其他情况也是如此，它们要么是真的，要么是假的。

  9. ruby - 使对象的行为类似于 ruby​​ 中并行分配的数组 - 2

    假设您在Ruby中执行此操作:ar=[1,2]x,y=ar然后，x==1和y==2。是否有一种方法可以在我自己的类中定义，从而产生相同的效果？例如rb=AllYourCode.newx,y=rb到目前为止，对于这样的赋值，我所能做的就是使x==rb和y=nil。Python有这样一个特性:>>>classFoo:...def__iter__(self):...returniter([1,2])...>>>x,y=Foo()>>>x1>>>y2 最佳答案 是的。定义#to_ary。这将使您的对象被视为要分配的数组。irb>o=Obje

  10. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功

随机推荐