{"action":"created","issue":{"url":"https://api.github.com/repos/Microsoft/vscode-webkit-debug/issues/40","labels_url":"https://api.github.com/repos/Microsoft/vscode-webkit-debug/issues/40/labels{/name}","comments_url":"https://api.github.com/repos/Microsoft/vscode-webkit-debug/issues/40/comments","events_url":"https://api.github.com/repos/Microsoft/vscode-webkit-debug/issues/40/events","html_url":"https://github.com/Microsoft/vscode-webkit-debug/issues/40","id":117677395,"number":40,"title":"Debugging webpack application","user":{"login":"conradz","id":1047153,"avatar_url":"https://avatars.githubusercontent.com/u/1047153?v=3","gravatar_id":"","url":"https://api.github.com/users/conradz","html_url":"https://github.com/conradz","followers_url":"https://api.github.com/users/conradz/followers","following_url":"https://api.github.com/users/conradz/following{/other_user}","gists_url":"https://api.github.com/users/conradz/gists{/gist_id}","starred_url":"https://api.github.com/users/conradz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/conradz/subscriptions","organizations_url":"https://api.github.com/users/conradz/orgs","repos_url":"https://api.github.com/users/conradz/repos","events_url":"https://api.github.com/users/conradz/events{/privacy}","received_events_url":"https://api.github.com/users/conradz/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Microsoft/vscode-webkit-debug/labels/bug","name":"bug","color":"fc2929"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2015-11-18T20:43:59Z","updated_at":"2015-11-19T05:41:06Z","closed_at":null,"body":"Is it possible to use this to debug JS code bundled with [webpack](http://webpack.github.io)? I tried to set it up to debug, but it wouldn't hit any breakpoints. I am using inline source maps, and got the file paths in the source maps to mirror my project file paths.\r\n\r\nHere is how I managed to get the webpack source map paths mirroring the actual project file paths (this is just the applicable parts, obviously there is much more configuration needed for the whole project):\r\n\r\n```\r\n// webpack config\r\nmodule.exports = {\r\n  devtool: 'inline-source-map',\r\n  output: {\r\n    devtoolModuleFilenameTemplate: sourceMapName\r\n  }\r\n};\r\n\r\nfunction sourceMapName(info) {\r\n    var p = info.resourcePath;\r\n    p = p.replace(/~/g, 'node_modules');\r\n    if (path.isAbsolute(p))\r\n        p = path.relative(root, p);\r\n    p = path.normalize(p);\r\n    return p.replace(/\\\\/g, '/');\r\n}\r\n```\r\n\r\nI thought that if source maps would point to the correct file names it would work, but something doesn't seem to be working. Launching chrome and using the console works fine, but I can't set any breakpoints at all. The breakpoints show in the editor but never get hit."},"comment":{"url":"https://api.github.com/repos/Microsoft/vscode-webkit-debug/issues/comments/157958175","html_url":"https://github.com/Microsoft/vscode-webkit-debug/issues/40#issuecomment-157958175","issue_url":"https://api.github.com/repos/Microsoft/vscode-webkit-debug/issues/40","id":157958175,"user":{"login":"roblourens","id":323878,"avatar_url":"https://avatars.githubusercontent.com/u/323878?v=3","gravatar_id":"","url":"https://api.github.com/users/roblourens","html_url":"https://github.com/roblourens","followers_url":"https://api.github.com/users/roblourens/followers","following_url":"https://api.github.com/users/roblourens/following{/other_user}","gists_url":"https://api.github.com/users/roblourens/gists{/gist_id}","starred_url":"https://api.github.com/users/roblourens/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/roblourens/subscriptions","organizations_url":"https://api.github.com/users/roblourens/orgs","repos_url":"https://api.github.com/users/roblourens/repos","events_url":"https://api.github.com/users/roblourens/events{/privacy}","received_events_url":"https://api.github.com/users/roblourens/received_events","type":"User","site_admin":false},"created_at":"2015-11-19T05:41:06Z","updated_at":"2015-11-19T05:41:06Z","body":"@joewood Yeah the only difference between \"launch\" and \"attach\" is that \"launch\" first guesses where chrome is and starts it. Then attaches to it, and everything is the same after that. About react-native, it looks like the typical approach is to use chrome devtools - if they have a proxy that exposes the chrome remote debug protocol somehow, then it might be possible to make this work already. I'll have to look into that later.\r\n\r\n@jahewson If you're using `webpack-dev-server` then this won't work yet. I just built a bundle.js which is really just the typical scenario."}}