{"componentChunkName":"component---src-templates-post-js","path":"/blog/magic-of-design-mode/","result":{"data":{"site":{"siteMetadata":{"title":"Anna Miroshnichenko","description":"I'm a Web developer who is interested in exploring new technologies. Here I'd like to share my ideas about programming and other things","author":"@annmirosh","siteUrl":"https://annmirosh.com"}},"markdownRemark":{"html":"<h1>Magic of the designMode: design a site on the flight</h1>\n<p>Have you ever tried a designMode in Chrome? It’s a magic mode that allows you to edit a page right in the browser. In general, it looks like this:</p>\n<img class=\"post-img\" src=\"/assets/posts/magic-of-design-mode/designMode.gif\" alt=\"Gif that shows how the designMode works\" title=\"Gif that shows how the designMode works\"/>\n<p>When do you need it? Let’s say you are discussing updates for your project with your manager. This mode allows you to quickly make some changes (e.g. to change a site’s tagline or make other text changes) and understand how the updated content will look.</p>\n<p>To use it, you need to open Chrome’s console and run the following code:</p>\n<pre><code class=\"language-js\">document.designMode = \"on\";\n</code></pre>\n<p>After this, you will be able to edit the page’s content as if you are working with it in a text editor.</p>\n<p>You do not need to change HTML in the Inspector any more, just type your new text and enjoy the magic.</p>","frontmatter":{"id":"magic-of-design-mode","slug":"magic-of-design-mode","title":"Magic of the designMode","description":"I'll show you how to change web pages on the flight.","date":"2019-10-25T00:00:00.000Z"},"wordCount":{"words":141}}},"pageContext":{"slug":"/magic-of-design-mode/"}}}