{"id":13708,"date":"2011-05-20T09:14:50","date_gmt":"2011-05-20T16:14:50","guid":{"rendered":"http:\/\/www.kith.org\/journals\/jed\/2011\/05\/20\/13708.html"},"modified":"2011-05-20T09:14:50","modified_gmt":"2011-05-20T16:14:50","slug":"htmlcssjs-analysisdebugging-to","status":"publish","type":"post","link":"https:\/\/www.kith.org\/jed\/2011\/05\/20\/htmlcssjs-analysisdebugging-to\/","title":{"rendered":"HTML\/CSS\/JS analysis\/debugging tools"},"content":{"rendered":"\n<p>The <a href=\"http:\/\/code.google.com\/chrome\/devtools\/\">Google Chrome Developer Tools<\/a> are a nifty set of tools built into the Chrome web browser that let you do all sorts of cool stuff with web-page code.<\/p>\n<p>The Dev Tools are based on a set of tools called the Web Inspector, which is part of the open-source WebKit project, which is the basis for both Chrome and Safari. So Safari also includes a version of <a href=\"http:\/\/developer.apple.com\/library\/safari\/#documentation\/AppleApplications\/Conceptual\/Safari_Developer_Guide\/\">Web Inspector<\/a>, which you can get to using the Develop menu (if you've enabled that menu in the Advanced section of Safari Preferences).<\/p>\n<p>And there are other developer tools available for other browsers.<\/p>\n<p>But in this entry I'm specifically linking to info about Chrome's Dev Tools.<\/p>\n<p>The <a href=\"http:\/\/code.google.com\/chrome\/devtools\/docs\/overview.html\">documentation<\/a> (which I haven't been involved in writing) shows what's available in each tools panel, and provides instructional <a href=\"http:\/\/code.google.com\/chrome\/devtools\/docs\/videos.html\">videos<\/a> with more details.<\/p>\n<p>But those docs and videos haven't yet been updated to cover the latest features and tools. For those, see the video of the <a href=\"http:\/\/www.youtube.com\/watch?v=N8SS-rUEZPg\">Dev Tools session<\/a> from I\/O last week. Autocomplete CSS color names on the fly! Keep a revision history of your tweaks! Script debugging! Network analysis! (The page-load timeline view is particularly nifty.) And lots more.<\/p>\n<p>I try not to be all cheerleady about stuff my company makes. But the Chrome Dev Tools are really cool and really useful, and if I were doing more web-page development these days, I'd be using them all the time.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>The Google Chrome Developer Tools are a nifty set of tools built into the Chrome web browser that let you&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25],"tags":[],"class_list":["post-13708","post","type-post","status-publish","format-standard","hentry","category-web-tech"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts\/13708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/comments?post=13708"}],"version-history":[{"count":0,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts\/13708\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/media?parent=13708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/categories?post=13708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/tags?post=13708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}