{"id":18193,"date":"2013-09-24T15:46:17","date_gmt":"2013-09-24T07:46:17","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18193"},"modified":"2024-08-16T18:55:49","modified_gmt":"2024-08-16T10:55:49","slug":"google-chrome-workspace","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/","title":{"rendered":"How to Edit and Debug Code Directly in Google Chrome Workspace"},"content":{"rendered":"<p>It\u2019s common to use the browser\u2019s Developer Tools to debug and test code during website development. However, changes made in Developer Tools do not affect the actual code within your project files. This often requires switching back and forth between your code editor and the browser to update files and view results.<\/p>\n<p>To simplify this workflow, Google Chrome has introduced a feature called <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/#workspace\" rel=\"nofollow noopener\" target=\"_blank\">Workspace<\/a>. This feature allows you to debug, edit, and save project files directly from the browser. In this post, we\u2019ll guide you through using Chrome Workspace.<\/p>\n<h2>How to Enable Chrome Workspace<\/h2>\n<p>As of this writing, Chrome Workspace is still considered an <strong>experimental<\/strong> feature, and it is not enabled by default. To activate it, navigate to <code>chrome:\/\/flags\/<\/code> and enable the \u201cDeveloper Tools experiment\u201d setting, as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/google-chrome-workspace\/enable-developer-tools.jpg\" width=\"500\" height=\"220\" alt=\"Enabling Developer Tools Experiment in Chrome Settings\"><\/figure>\n<p>After enabling this feature, restart Chrome.<\/p>\n<p>Next, open Chrome Developer Tools (DevTools). Click on the gear icon in the bottom right corner to access <strong>Settings<\/strong>. Navigate to the <strong>Experiments<\/strong> tab, and check the box for <strong>File system folders in the Source Panel<\/strong>, as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/google-chrome-workspace\/set-setting.jpg\" width=\"500\" height=\"210\" alt=\"Enabling File System Folders in Chrome DevTools\"><\/figure>\n<p>Restart DevTools and go back to the <strong>Settings<\/strong> page. You should now see a new tab called <strong>Workspace<\/strong>. Go to the Workspace tab and click on <strong>Add File System<\/strong> to add your project folder, as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/google-chrome-workspace\/add-file-system.jpg\" width=\"500\" height=\"210\" alt=\"Adding a File System in Chrome Workspace\"><\/figure>\n<p>After adding your project folder, close the Settings window and navigate to the <strong>Source<\/strong> panel.<\/p>\n<p>In the left sidebar of the Source panel, you will see the project folder you just added, including its CSS, HTML, and JavaScript files. Open your project in Chrome, make some changes to the files, save them, and the changes should also be reflected in the actual files.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/google-chrome-workspace\/source-tab.jpg\" width=\"500\" height=\"250\" alt=\"Viewing Project Files in Chrome Workspace Source Panel\"><\/figure>\n<p>However, keep in mind that changes won\u2019t be immediately visible as you edit the files. To view the updated results, refresh Chrome.<\/p>\n<h2>Conclusion<\/h2>\n<p>While this feature may not fully replace your code editor, it\u2019s a valuable addition that streamlines the code-debugging process. Remember, Chrome Workspace is still experimental, so some features may change in future updates.<\/p>\n<p><strong>Have you tried working with Chrome Workspace? Share your thoughts in the comments below.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>It\u2019s common to use the browser\u2019s Developer Tools to debug and test code during website development. However, changes made in Developer Tools do not affect the actual code within your project files. This often requires switching back and forth between your code editor and the browser to update files and view results. To simplify this&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[1258,2856,37],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Edit and Debug Code Directly in Google Chrome Workspace - Hongkiat<\/title>\n<meta name=\"description\" content=\"It&#039;s common to use the browser&#039;s Developer Tools to debug and test code during website development. However, changes made in Developer Tools do not affect\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Edit and Debug Code Directly in Google Chrome Workspace\" \/>\n<meta property=\"og:description\" content=\"It&#039;s common to use the browser&#039;s Developer Tools to debug and test code during website development. However, changes made in Developer Tools do not affect\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-09-24T07:46:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-16T10:55:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/google-chrome-workspace\/enable-developer-tools.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Edit and Debug Code Directly in Google Chrome Workspace\",\"datePublished\":\"2013-09-24T07:46:17+00:00\",\"dateModified\":\"2024-08-16T10:55:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/\"},\"wordCount\":354,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/google-chrome-workspace\\\/enable-developer-tools.jpg\",\"keywords\":[\"Chrome\",\"Dev Tools\",\"Google\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/\",\"name\":\"How to Edit and Debug Code Directly in Google Chrome Workspace - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/google-chrome-workspace\\\/enable-developer-tools.jpg\",\"datePublished\":\"2013-09-24T07:46:17+00:00\",\"dateModified\":\"2024-08-16T10:55:49+00:00\",\"description\":\"It's common to use the browser's Developer Tools to debug and test code during website development. However, changes made in Developer Tools do not affect\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/google-chrome-workspace\\\/enable-developer-tools.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/google-chrome-workspace\\\/enable-developer-tools.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-chrome-workspace\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Edit and Debug Code Directly in Google Chrome Workspace\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Edit and Debug Code Directly in Google Chrome Workspace - Hongkiat","description":"It's common to use the browser's Developer Tools to debug and test code during website development. However, changes made in Developer Tools do not affect","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:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/","og_locale":"en_US","og_type":"article","og_title":"How to Edit and Debug Code Directly in Google Chrome Workspace","og_description":"It's common to use the browser's Developer Tools to debug and test code during website development. However, changes made in Developer Tools do not affect","og_url":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-09-24T07:46:17+00:00","article_modified_time":"2024-08-16T10:55:49+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/google-chrome-workspace\/enable-developer-tools.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Edit and Debug Code Directly in Google Chrome Workspace","datePublished":"2013-09-24T07:46:17+00:00","dateModified":"2024-08-16T10:55:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/"},"wordCount":354,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/google-chrome-workspace\/enable-developer-tools.jpg","keywords":["Chrome","Dev Tools","Google"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/","url":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/","name":"How to Edit and Debug Code Directly in Google Chrome Workspace - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/google-chrome-workspace\/enable-developer-tools.jpg","datePublished":"2013-09-24T07:46:17+00:00","dateModified":"2024-08-16T10:55:49+00:00","description":"It's common to use the browser's Developer Tools to debug and test code during website development. However, changes made in Developer Tools do not affect","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/google-chrome-workspace\/enable-developer-tools.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/google-chrome-workspace\/enable-developer-tools.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/google-chrome-workspace\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Edit and Debug Code Directly in Google Chrome Workspace"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4Jr","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18193"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18193\/revisions"}],"predecessor-version":[{"id":72595,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18193\/revisions\/72595"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18193"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}