I’m using Visual Code for my React development and I’m using Chrome as my browser – I want to debug my React code in Chrome using Visual Code, so let’ see how it’s done.<\/p>\n
First off, check out Introducing Chrome Debugging for VS Code<\/a>, secondly VS Code – Debugger for Chrome<\/a>.<\/p>\n Or, if you prefer, here’s the steps<\/p>\n You’re going to need a launch.json file in the .vscode folder, here’s a minimal example<\/p>\n In the above we have two configurations, both for Chrome, one launches Chrome with the supplied URL, the second attaches to an existing instance of Chrome.<\/p>\n If you now choose the option Run | Start Debugging, Chrome will launch with your URL loaded. You can place breakpoints in your code (before or after you start debugging) and you’re application will break at these breakpoints as you’d expect and you can inspect variables etc. So basically a full debugging experience.<\/p>\n Default commands within debug mode are as follows<\/p>\n To attach to an existing running instance of Chrome, ensure you start Chrome with the following command line parameters –remote-debugging-port=9222<\/em>, for example create a shortcut link with Target “C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe” –remote-debugging-port=9222<\/em>.<\/p>\n You’ll also need to ensure only this instance of Chrome is open\/running and then you can run the “Attach to Chrome” option.<\/p>\n","protected":false},"excerpt":{"rendered":" I’m using Visual Code for my React development and I’m using Chrome as my browser – I want to debug my React code in Chrome using Visual Code, so let’ see how it’s done. First off, check out Introducing Chrome Debugging for VS Code, secondly VS Code – Debugger for Chrome. Or, if you prefer, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[246],"tags":[],"class_list":["post-8372","post","type-post","status-publish","format-standard","hentry","category-visual-code"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=8372"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8372\/revisions"}],"predecessor-version":[{"id":11125,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8372\/revisions\/11125"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=8372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=8372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=8372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\r\n{\r\n \/\/ Use IntelliSense to learn about possible attributes.\r\n \/\/ Hover to view descriptions of existing attributes.\r\n \/\/ For more information, visit: https:\/\/go.microsoft.com\/fwlink\/?linkid=830387\r\n "version": "0.2.0",\r\n "configurations": [\r\n {\r\n "type": "chrome",\r\n "request": "launch",\r\n "name": "Launch Chrome",\r\n "url": "http:\/\/localhost:3000",\r\n "webRoot": "${workspaceFolder}"\r\n },\r\n {\r\n "type": "chrome",\r\n "request": "attach",\r\n "name": "Attach to Chrome",\r\n "port": 9222,\r\n "webRoot": "${workspaceFolder}"\r\n }\r\n ]\r\n}\r\n<\/pre>\n\n