{"id":26056,"date":"2023-07-06T12:00:03","date_gmt":"2023-07-06T16:00:03","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=26056"},"modified":"2024-07-09T17:07:10","modified_gmt":"2024-07-09T21:07:10","slug":"debugging-react-with-vs-code-and-chrome","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/","title":{"rendered":"Debugging React with VS Code and Chrome"},"content":{"rendered":"

Have you ever considered using a debugger for your React project but decided to keep on using console.log()<\/code> instead because you thought it would be a pain to set up proper debugging?<\/p>\n

I did, until one day, I needed to get into the weeds on a project, and I figured I’d try and set up debugging in hopes of making my life easier. I was delighted to find out how easy it was! In this post, I’ll demonstrate how to debug a React project using VS Code and Chrome.<\/p>\n

To demonstrate how to set things up, I’m going to use Vite and React to set up a React project. You’ll need to have VS Code and NPM installed.<\/p>\n

Set Up a Workspace in VS Code<\/h2>\n

First, create a directory for our workspace. Then Open the directory in VS Code. Save the workspace.<\/p>\n

I used D:devtrainingdebugging-react<\/code>.<\/p>\n

Create a React Starter Project Using Vite<\/h3>\n

From VS Code, open up this location in the integrated terminal and run the following command to create a starter project: npm create vite@latest<\/code><\/p>\n

\"Create<\/p>\n

Follow the prompt from Vite. Give the project a name (I used vite-demo<\/code> ). Select React<\/em> for the framework and JavaScript<\/em> for the variant.<\/p>\n

Once that’s all set, change directories into the project folder that you assigned, run npm install<\/code>.<\/p>\n

\"Install<\/p>\n

Once the installation is complete, start Vite by running npm run dev<\/code>.<\/p>\n

\"Run<\/p>\n

We can see that our project is running on localhost, port 5173<\/code>. A browser window will be opened with the project:<\/p>\n

\"Vite<\/p>\n

Create and Configure a launch.json<\/code> File in VS Code<\/h2>\n

Now we need to create a launch.json<\/code> file. Click the Debug icon (1), then create a launch.json file<\/em> (2). The launch.json<\/code> file will be located in your workspace’s .vscode<\/code> directory.<\/p>\n

\"Create<\/p>\n

Select the location:<\/p>\n

\"Select<\/p>\n

Select Chrome for the debugging type:<\/p>\n

\"Debugging<\/p>\n

This will open the launch.json<\/code> file in a tab. (1) Set the port to whatever was specified by Vite earlier (5173<\/code> by default), and (2) add the subdirectory your project is into the webRoot<\/code> option if you have your project in a subdirectory like I do here (\/vite-demo<\/code>).<\/p>\n

\"Configure<\/p>\n

Add a Breakpoint to the Code<\/h3>\n

Now open up your project’s src\/App.jsx<\/code>file (1) and (2) add a breakpoint to line 20. We’re going to debug the count<\/code> variable.<\/p>\n

\"Add<\/p>\n

Start Debugging Your React Project!<\/h2>\n

OK, we’re getting close! Now click the Start button to start debugging. This will launch our app in a new Chrome window.<\/p>\n

\"Start<\/p>\n

The app is paused for debugging.<\/p>\n

\"App<\/p>\n

A debugging session is now active in VS Code. We can use the debugging control bar to step through and inspect the code.<\/p>\n

\"Debugging<\/p>\n

We can interact with the app and see the value of the counter increase after clicking the count button.<\/p>\n

\"Click<\/p>\n

\"Observe<\/p>\n

Here’s a quick screen capture showing this in action:<\/p>\n

\"Debugging<\/p>\n

One thing to note is that, by default, React.StrictMode<\/code> is enabled in dev mode, so your app will be run twice. See the docs<\/a> for details on Strict Mode.<\/p>\n

That’s all there is to setting up basic React debugging in VS Code and Chrome. I hope this helps you to more efficiently debug your React projects.<\/p>\n

\n

Are you struggling with WordPress security? Our free guide teaches you everything you need to know to protect your site. Download and read our “Guide to WordPress Security<\/a>” to safeguard your website.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Have you ever considered using a debugger for your React project but decided to keep on using console.log() instead because you thought it would be a pain to set up proper debugging? I did, until one day, I needed to get into the weeds on a project, and I figured I’d try and set up Read More Debugging React with VS Code and Chrome<\/span><\/a><\/p>\n","protected":false},"author":132,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[357,954],"tags":[3695,8536,11832],"coauthors":[13188],"class_list":["post-26056","post","type-post","status-publish","format-standard","hentry","category-debugging","category-javascript","tag-chrome","tag-react","tag-vs-code"],"acf":{"blog_hero_image":{"ID":26074,"id":26074,"title":"debugging-react-vscode-ambush-bug-dave-romsey","filename":"debugging-react-vscode-ambush-bug-dave-romsey-1.jpg","filesize":397559,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1.jpg","link":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/debugging-react-vscode-ambush-bug-dave-romsey-2\/","alt":"","author":"132","description":"","caption":"","name":"debugging-react-vscode-ambush-bug-dave-romsey-2","status":"inherit","uploaded_to":26056,"date":"2023-04-13 13:37:27","modified":"2023-04-13 13:37:27","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/webdevstudios.com\/wp-includes\/images\/media\/default.png","width":2000,"height":1333,"sizes":{"thumbnail":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-300x200.jpg","medium-width":300,"medium-height":200,"medium_large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-768x512.jpg","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-1024x682.jpg","large-width":850,"large-height":566,"1536x1536":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-1536x1024.jpg","1536x1536-width":1536,"1536x1536-height":1024,"2048x2048":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1.jpg","2048x2048-width":2000,"2048x2048-height":1333,"featured-work-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-436x511.jpg","featured-work-lg-width":436,"featured-work-lg-height":511,"featured-work-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-436x241.jpg","featured-work-sm-width":436,"featured-work-sm-height":241,"book-cover":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-235x300.jpg","book-cover-width":235,"book-cover-height":300,"home-hero":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-1350x440.jpg","home-hero-width":1350,"home-hero-height":440,"services-screenshot":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-590x790.jpg","services-screenshot-width":590,"services-screenshot-height":790,"single-blog-featured":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-1920x625.jpg","single-blog-featured-width":1920,"single-blog-featured-height":625,"single-blog-inline":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-850x360.jpg","single-blog-inline-width":850,"single-blog-inline-height":360,"grid-image":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-420x420.jpg","grid-image-width":420,"grid-image-height":420,"logo-train":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-90x60.jpg","logo-train-width":90,"logo-train-height":60,"simple-header":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-1920x191.jpg","simple-header-width":1920,"simple-header-height":191,"full-width":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-1620x1080.jpg","full-width-width":1620,"full-width-height":1080,"fifty-fifty-media":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1-1300x866.jpg","fifty-fifty-media-width":1300,"fifty-fifty-media-height":866,"gform-image-choice-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":200,"gform-image-choice-md":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":267,"gform-image-choice-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/debugging-react-vscode-ambush-bug-dave-romsey-1.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":400}}},"yoast_head":"\nDebugging React with VS Code and Chrome - WebDevStudios<\/title>\n<meta name=\"description\" content=\"Have you ever considered using a debugger for your React project but decided to keep on using console.log() instead because you thought it would be a pain Learn how to debug React using VS Code and Chrome\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Debugging React with VS Code and Chrome\" \/>\n<meta property=\"og:description\" content=\"Have you ever considered using a debugger for your React project but decided to keep on using console.log() instead because you thought it would be a pain Learn how to debug React using VS Code and Chrome\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDevStudios\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/webdevstudios\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-06T16:00:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-09T21:07:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/Copy-of-Blog-Post-Template.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dave Romsey\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:site\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dave Romsey\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/\"},\"author\":{\"name\":\"Dave Romsey\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/ededd1a789bcd1d0ee42a9d2a40be901\"},\"headline\":\"Debugging React with VS Code and Chrome\",\"datePublished\":\"2023-07-06T16:00:03+00:00\",\"dateModified\":\"2024-07-09T21:07:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/\"},\"wordCount\":534,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/install-vite.png\",\"keywords\":[\"Chrome\",\"React\",\"VS Code\"],\"articleSection\":[\"Debugging\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/\",\"name\":\"Debugging React with VS Code and Chrome - WebDevStudios\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/install-vite.png\",\"datePublished\":\"2023-07-06T16:00:03+00:00\",\"dateModified\":\"2024-07-09T21:07:10+00:00\",\"description\":\"Have you ever considered using a debugger for your React project but decided to keep on using console.log() instead because you thought it would be a pain Learn how to debug React using VS Code and Chrome\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/install-vite.png\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/install-vite.png\",\"width\":678,\"height\":346,\"caption\":\"Create a Vite project\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/07\\\/06\\\/debugging-react-with-vs-code-and-chrome\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdevstudios.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Debugging React with VS Code and Chrome\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"name\":\"WebDevStudios\",\"description\":\"WordPress Design and Development Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webdevstudios.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\",\"name\":\"WebDevStudios\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"width\":173,\"height\":60,\"caption\":\"WebDevStudios\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/facebook.com\\\/webdevstudios\",\"https:\\\/\\\/x.com\\\/webdevstudios\",\"http:\\\/\\\/instagram.com\\\/webdevstudios\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/webdevstudios-llc-\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/ededd1a789bcd1d0ee42a9d2a40be901\",\"name\":\"Dave Romsey\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g1745ea464d21ac3e01b84b7c1e90810d\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g\",\"caption\":\"Dave Romsey\"},\"description\":\"David (Dave) is a Senior Backend Engineer at WebDevStudios where he works on WordPress plugins, themes, and web applications. He loves building solutions that help enable clients to achieve their goals. After graduating from Kent State University with a Bachelor\u2019s Degree in Computer Information Systems, Dave started working at Go Media Inc., where he successfully lobbied to adopt WordPress as the preferred platform to build solutions with, crediting its ease of use for both developers and end users. During his tenure, David created starter themes and various plugins which he used along with the team to build custom WordPress solutions for a wide range of clients. He has racked up over 10 years of experience developing with WordPress and has loved watching it evolve year after year. Prior to starting his career in web development, Dave established a strong background in customer service, where he once used The Telephone Doctors Swear Stopper to diffuse a tense situation. He also has a great sense of humor and is totally not writing this about himself. Dave has tons of hobbies and is always getting into something new, so he\u2019s never bored. He enjoys macro photography (particularly insect portraiture), riding his bike on the trail, cooking, playing darts, and hanging out with his two sassy teenage girls, Deedlit and Snarf.\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/author\\\/david-romseywebdevstudios-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Debugging React with VS Code and Chrome - WebDevStudios","description":"Have you ever considered using a debugger for your React project but decided to keep on using console.log() instead because you thought it would be a pain Learn how to debug React using VS Code and Chrome","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/","og_locale":"en_US","og_type":"article","og_title":"Debugging React with VS Code and Chrome","og_description":"Have you ever considered using a debugger for your React project but decided to keep on using console.log() instead because you thought it would be a pain Learn how to debug React using VS Code and Chrome","og_url":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/","og_site_name":"WebDevStudios","article_publisher":"http:\/\/facebook.com\/webdevstudios","article_published_time":"2023-07-06T16:00:03+00:00","article_modified_time":"2024-07-09T21:07:10+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/Copy-of-Blog-Post-Template.png","type":"image\/png"}],"author":"Dave Romsey","twitter_card":"summary_large_image","twitter_creator":"@webdevstudios","twitter_site":"@webdevstudios","twitter_misc":{"Written by":"Dave Romsey","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/#article","isPartOf":{"@id":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/"},"author":{"name":"Dave Romsey","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/ededd1a789bcd1d0ee42a9d2a40be901"},"headline":"Debugging React with VS Code and Chrome","datePublished":"2023-07-06T16:00:03+00:00","dateModified":"2024-07-09T21:07:10+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/"},"wordCount":534,"commentCount":0,"publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"image":{"@id":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/install-vite.png","keywords":["Chrome","React","VS Code"],"articleSection":["Debugging","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/","url":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/","name":"Debugging React with VS Code and Chrome - WebDevStudios","isPartOf":{"@id":"https:\/\/webdevstudios.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/#primaryimage"},"image":{"@id":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/install-vite.png","datePublished":"2023-07-06T16:00:03+00:00","dateModified":"2024-07-09T21:07:10+00:00","description":"Have you ever considered using a debugger for your React project but decided to keep on using console.log() instead because you thought it would be a pain Learn how to debug React using VS Code and Chrome","breadcrumb":{"@id":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/#primaryimage","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/install-vite.png","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/04\/install-vite.png","width":678,"height":346,"caption":"Create a Vite project"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevstudios.com\/2023\/07\/06\/debugging-react-with-vs-code-and-chrome\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevstudios.com\/"},{"@type":"ListItem","position":2,"name":"Debugging React with VS Code and Chrome"}]},{"@type":"WebSite","@id":"https:\/\/webdevstudios.com\/#website","url":"https:\/\/webdevstudios.com\/","name":"WebDevStudios","description":"WordPress Design and Development Agency","publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevstudios.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevstudios.com\/#organization","name":"WebDevStudios","url":"https:\/\/webdevstudios.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","width":173,"height":60,"caption":"WebDevStudios"},"image":{"@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/webdevstudios","https:\/\/x.com\/webdevstudios","http:\/\/instagram.com\/webdevstudios","https:\/\/www.linkedin.com\/company\/webdevstudios-llc-\/"]},{"@type":"Person","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/ededd1a789bcd1d0ee42a9d2a40be901","name":"Dave Romsey","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g1745ea464d21ac3e01b84b7c1e90810d","url":"https:\/\/secure.gravatar.com\/avatar\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g","caption":"Dave Romsey"},"description":"David (Dave) is a Senior Backend Engineer at WebDevStudios where he works on WordPress plugins, themes, and web applications. He loves building solutions that help enable clients to achieve their goals. After graduating from Kent State University with a Bachelor\u2019s Degree in Computer Information Systems, Dave started working at Go Media Inc., where he successfully lobbied to adopt WordPress as the preferred platform to build solutions with, crediting its ease of use for both developers and end users. During his tenure, David created starter themes and various plugins which he used along with the team to build custom WordPress solutions for a wide range of clients. He has racked up over 10 years of experience developing with WordPress and has loved watching it evolve year after year. Prior to starting his career in web development, Dave established a strong background in customer service, where he once used The Telephone Doctors Swear Stopper to diffuse a tense situation. He also has a great sense of humor and is totally not writing this about himself. Dave has tons of hobbies and is always getting into something new, so he\u2019s never bored. He enjoys macro photography (particularly insect portraiture), riding his bike on the trail, cooking, playing darts, and hanging out with his two sassy teenage girls, Deedlit and Snarf.","url":"https:\/\/webdevstudios.com\/author\/david-romseywebdevstudios-com\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3WX6u-6Mg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/26056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/users\/132"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/comments?post=26056"}],"version-history":[{"count":0,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/26056\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media?parent=26056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/categories?post=26056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/tags?post=26056"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/coauthors?post=26056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}