断点和调试语句打开“只读内联内容”。 [英] Breakpoints and debugging statements open "read-only inlined content"

问题描述

上下文：

我正在使用Webpack的React.js应用程序上工作，并且我使用VS Code作为编辑器。

Webpack配置将内联源映射指定为其 devtool 选项。但我也正在使用热重装。因此，源地图实际上是通过 webpack：// 协议进入浏览器的。

我正在使用以下代码 launch.json 配置：

  {
 name ：在Chrome中启动，
 type： chrome，
 request：启动，
 url： https：//myapp.local/， //这不是真正的应用程序URL 
 trace：是，
 sourceMaps：是，
 webRoot： $ {workspaceRoot} / build，
  sourceMapPathOverrides：{
 webpack：/// *： $ {webRoot} / * 
}，
 preLaunchTask：开发，
 internalConsoleOptions ： openOnSessionStart，
 smartStep：true，
 skipFiles：[
 node_modules / **，
扩展名： 
] 
} 
  

我正在使用

我只希望能够直接调试并处理我的文件！

解决方案

我使用了launch.json配置。希望它能对您有所帮助。

  {
 name：启动localhost，
 type ： chrome，
 request： attach，
 url： http：// localhost：8080，
 port：9222，
 webRoot： $ {workspaceFolder} / src，
 sourceMapPathOverrides：{ webpack：///./src/*： $ {workspaceFolder} / src / *}，
  sourceMaps：true，
} 
  

Context:

I am working on a React.js app that uses Webpack, and I'm using VS Code as my editor.

The Webpack config is specifying inline-source-map as its devtool option. but I am using hot reloading, too. So, source maps actually come into the browser via this webpack:// protocol.

I am using the following launch.json config:

{
    "name": "Launch in Chrome",
    "type": "chrome",
    "request": "launch",
    "url" : "https://myapp.local/", // This is not the real app URL
    "trace" : true,
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}/build",
    "sourceMapPathOverrides": {
        "webpack:///*" : "${webRoot}/*"
    },
    "preLaunchTask" : "development",
    "internalConsoleOptions": "openOnSessionStart",
    "smartStep": true,
    "skipFiles": [
        "node_modules/**",
        "extensions:"
    ]
}

and I'm using this tasks.json.

---

Problem

So this mostly works well, except when I put a breakpoint somewhere, it opens the tab in a new tab marked as read-only inlined content from source map:

I just want to be able to debug and work on my files directly!

解决方案

I got it working with this launch.json config. Hopefully it helps you.

{
  "name": "Launch localhost",
  "type": "chrome",
  "request": "attach",
  "url": "http://localhost:8080",
  "port": 9222,
  "webRoot": "${workspaceFolder}/src",
  "sourceMapPathOverrides": { "webpack:///./src/*": "${workspaceFolder}/src/*" },
  "sourceMaps": true,
}

这篇关于断点和调试语句打开“只读内联内容”。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！