{"id":18313,"date":"2013-06-04T12:25:41","date_gmt":"2013-06-04T10:25:41","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=18313"},"modified":"2013-06-04T12:25:41","modified_gmt":"2013-06-04T10:25:41","slug":"chrome-devtools-authoring-development-workflow","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2013\/06\/04\/chrome-devtools-authoring-development-workflow\/","title":{"rendered":"Chrome DevTools : Authoring &#038; development workflow"},"content":{"rendered":"<!-- google_ad_section_start -->\n<p>Via <a href=\"http:\/\/habrahabr.ru\/post\/181992\/\">this Habrahabr article<\/a> (in Russian) I&#8217;ve learned way more about <a href=\"https:\/\/developers.google.com\/chrome-developer-tools\/docs\/authoring-development-workflow\">Chrome DevTools<\/a> than I knew before. \u00a0<a href=\"https:\/\/developers.google.com\/chrome-developer-tools\/docs\/authoring-development-workflow#snippets\">Code snippets<\/a> is a useful feature that is available in pretty much every code editor, but seems to be more useful in the environment, where the snippets can actually be executed. \u00a0Also, <a href=\"https:\/\/plus.google.com\/+GoogleChromeDevelopers\/posts\/644qQuBKZeL\">Workspaces<\/a> mapping of the resources in the browser session to the local files is a game changer. \u00a0Watch <a href=\"https:\/\/www.youtube.com\/watch?feature=player_embedded&amp;v=kVSo4buDAEE#!\">this video<\/a> to learn even more.<\/p>\n<p style=\"text-align: center;\"><div class=\"jetpack-video-wrapper\"><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"660\" height=\"372\" src=\"https:\/\/www.youtube.com\/embed\/kVSo4buDAEE?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span><\/div><\/p>\n<!-- google_ad_section_end -->\n","protected":false},"excerpt":{"rendered":"<!-- google_ad_section_start -->\n<p>Via this Habrahabr article (in Russian) I&#8217;ve learned way more about Chrome DevTools than I knew before. \u00a0Code snippets is a useful feature that is available in pretty much every code editor, but seems to be more useful in the environment, where the snippets can actually be executed. \u00a0Also, Workspaces mapping of the resources in &hellip; <a href=\"https:\/\/mamchenkov.net\/wordpress\/2013\/06\/04\/chrome-devtools-authoring-development-workflow\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Chrome DevTools : Authoring &#038; development workflow<\/span><\/a><\/p>\n<!-- google_ad_section_end -->\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[1955,1079,2297,1330,1908],"keyring_services":[],"class_list":["post-18313","post","type-post","status-publish","format-standard","hentry","category-general","category-programming","category-technology","category-web-work","tag-google-chrome","tag-productivity","tag-text-editors","tag-web-development","tag-youtube-videos"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":25154,"url":"https:\/\/mamchenkov.net\/wordpress\/2016\/02\/04\/chrome-devtools-remote-debugging-devices\/","url_meta":{"origin":18313,"position":0},"title":"Chrome DevTools : Remote Debugging Devices","author":"Leonid Mamchenkov","date":"February 4, 2016","format":false,"excerpt":"Remote debugging on Android with Chrome DevTools sounds like the best thing since sliced bread for anybody involved in web development. \u00a0TL;DR version: There's no substitute for debugging your site on a real device. Debug browser tabs on your device from your development workspace using remote debugging. You don't have\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"remote-debug-banner","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2016\/02\/remote-debug-banner-500x247.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":16805,"url":"https:\/\/mamchenkov.net\/wordpress\/2012\/10\/05\/wait-devtools-could-do-that\/","url_meta":{"origin":18313,"position":1},"title":"Wait, DevTools could do THAT?","author":"Leonid Mamchenkov","date":"October 5, 2012","format":"link","excerpt":"Wait, DevTools could do THAT? This is an excellent presentation about the Google Chrome built-in DevTools \u00a0(click outside the slide to move to the next one).","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":28180,"url":"https:\/\/mamchenkov.net\/wordpress\/2017\/11\/06\/clockwork-php-developer-tools-integration-for-google-chrome\/","url_meta":{"origin":18313,"position":2},"title":"Clockwork &#8211; PHP developer tools integration for Google Chrome","author":"Leonid Mamchenkov","date":"November 6, 2017","format":false,"excerpt":"Clockwork is a PHP library and a Google Chrome extension that work together to provide a new tab in the Google Chrome DevTools for PHP developers.\u00a0 The tab contains all sorts of useful information such as variable values, application tracing, timing, and more.","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2017\/11\/clockwork-500x223.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":24687,"url":"https:\/\/mamchenkov.net\/wordpress\/2015\/08\/31\/logging-with-monolog\/","url_meta":{"origin":18313,"position":3},"title":"Logging with Monolog","author":"Leonid Mamchenkov","date":"August 31, 2015","format":false,"excerpt":"\"Logging with Monolog: From Devtools to Slack\" is a handy quick article for anybody who wants to use Monolog for logging in PHP applications. \u00a0After all, monolog\/monolog is one of the most popular libraries on Packagist.","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":24152,"url":"https:\/\/mamchenkov.net\/wordpress\/2015\/05\/21\/octrotree-google-chrome-extension-for-browsing-github-code-repositories\/","url_meta":{"origin":18313,"position":4},"title":"OctroTree &#8211; Google Chrome extension for browsing GitHub code repositories","author":"Leonid Mamchenkov","date":"May 21, 2015","format":false,"excerpt":"OctroTree - Google Chrome extension for browsing GitHub code repositories. \u00a0I promise you, this is one of those things that you wouldn't believe you lived without before. \u00a0Fast, convenient, with support for private repositories (via API access token), GitHub Enterprise, and keyboard shortcuts. \u00a0Absolutely essential for anyone who is on\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"octotree","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2015\/05\/octotree-500x317.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":26956,"url":"https:\/\/mamchenkov.net\/wordpress\/2016\/11\/25\/chrome-extension-var_masterpiece-turn-php-var_dump-into-a-thing-of-beauty\/","url_meta":{"origin":18313,"position":5},"title":"Chrome Extension : var_masterpiece &#8211; turn PHP var_dump() into a thing of beauty","author":"Leonid Mamchenkov","date":"November 25, 2016","format":false,"excerpt":"Var Masterpiece is a Google Chrome add-on, which formats PHP var_dump() output into\u00a0something much more beautiful and useful. \u00a0You can customize the type colors and a few other things in the extension options, once installed.","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"var_masterpiece","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2016\/11\/var_masterpiece-500x210.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/18313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/comments?post=18313"}],"version-history":[{"count":0,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/18313\/revisions"}],"wp:attachment":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/media?parent=18313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/categories?post=18313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/tags?post=18313"},{"taxonomy":"keyring_services","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/keyring_services?post=18313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}