{"id":240,"date":"2010-06-10T04:48:20","date_gmt":"2010-06-10T04:48:20","guid":{"rendered":"http:\/\/samwebman.wordpress.com\/?p=240"},"modified":"2010-06-10T04:48:20","modified_gmt":"2010-06-10T04:48:20","slug":"google-chrome-developer-tools","status":"publish","type":"post","link":"https:\/\/www.intentrust.com\/?p=240","title":{"rendered":"Google Chrome Developer Tools"},"content":{"rendered":"<blockquote><p>The <a href=\"http:\/\/www.chromium.org\/devtools\" target=\"_blank\" rel=\"noopener\">Chrome  Developer Tools<\/a> are great for debugging HTML, JavaScript and CSS in  Chrome. If you&#8217;re writing a webpage or even a web app for the <a href=\"https:\/\/chrome.google.com\/webstore\" target=\"_blank\" rel=\"noopener\">Chrome Web  Store<\/a>, you can inspect elements in the DOM, debug live JavaScript,  and edit CSS styles directly in the current page. Extensions can make  Google Chrome an even better web development environment by providing  additional features that you can easily access in your browser. To help  developers like you, we created a page that <a href=\"https:\/\/chrome.google.com\/extensions\/featured\/web_dev\" target=\"_blank\" rel=\"noopener\">features  extensions for web development<\/a>. We hope you\u2019ll find them useful in  creating applications and sites for the web.<\/p>\n<div><a href=\"http:\/\/1.bp.blogspot.com\/_o5Na_9269nA\/S_3-tpBLsVI\/AAAAAAAAES8\/FLQ82oFag1M\/s1600\/index.001.png\" target=\"_blank\" rel=\"noopener\"><img src=\"http:\/\/1.bp.blogspot.com\/_o5Na_9269nA\/S_3-tpBLsVI\/AAAAAAAAES8\/FLQ82oFag1M\/s400\/index.001.png\" border=\"0\" alt=\"\" \/><\/a><\/div>\n<p>For example, <a href=\"https:\/\/chrome.google.com\/extensions\/detail\/ognampngfcbddbfemdapefohjiobgbdl\" target=\"_blank\" rel=\"noopener\">Speed  Tracer<\/a> is an extension to help you identify and fix performance  issues in your web applications. With Speed Tracer, you can get a better  idea of where time is being spent in your application and troubleshoot  problems in JavaScript parsing and execution, CSS style, and more.<\/p>\n<div><a href=\"http:\/\/2.bp.blogspot.com\/_o5Na_9269nA\/S_3-77f387I\/AAAAAAAAETE\/kBKg3KXFSSs\/s1600\/index.002.png\" target=\"_blank\" rel=\"noopener\"><img src=\"http:\/\/2.bp.blogspot.com\/_o5Na_9269nA\/S_3-77f387I\/AAAAAAAAETE\/kBKg3KXFSSs\/s400\/index.002.png\" border=\"0\" alt=\"\" \/><\/a><\/div>\n<p>Another useful extension is the <a href=\"https:\/\/chrome.google.com\/extensions\/detail\/idhfcdbheobinplaamokffboaccidbal\" target=\"_blank\" rel=\"noopener\">Resolution  Test<\/a> that changes the size of the browser window, so web developers  can preview websites in different screen resolutions. It also includes a  list of commonly used resolutions, as well as a custom option to input  your own resolution.<\/p>\n<div><a href=\"http:\/\/3.bp.blogspot.com\/_o5Na_9269nA\/S_3_CK9D6VI\/AAAAAAAAETM\/LK7K5m6GKV4\/s1600\/index.003.png\" target=\"_blank\" rel=\"noopener\"><img src=\"http:\/\/3.bp.blogspot.com\/_o5Na_9269nA\/S_3_CK9D6VI\/AAAAAAAAETM\/LK7K5m6GKV4\/s400\/index.003.png\" border=\"0\" alt=\"\" \/><\/a><\/div>\n<p>With the <a href=\"https:\/\/chrome.google.com\/extensions\/detail\/bfbameneiokkgbdmiekhjnmfkcnldhhm\" target=\"_blank\" rel=\"noopener\">Web  Developer<\/a> extension, you can access additional developer tools such  as validation options, page resizing and a CSS elements viewer; all  from an additional button in the toolbar.<\/p>\n<div><a href=\"http:\/\/4.bp.blogspot.com\/_o5Na_9269nA\/S_3_KnZWqqI\/AAAAAAAAETU\/56CH9vLGJaM\/s1600\/index.004.png\" target=\"_blank\" rel=\"noopener\"><img src=\"http:\/\/4.bp.blogspot.com\/_o5Na_9269nA\/S_3_KnZWqqI\/AAAAAAAAETU\/56CH9vLGJaM\/s400\/index.004.png\" border=\"0\" alt=\"\" \/><\/a><\/div>\n<p>Another extension you should check out  is the <a href=\"https:\/\/chrome.google.com\/extensions\/detail\/nglgdmkkiemejlladcdjegcllaieegoe\" target=\"_blank\" rel=\"noopener\">Chrome  Editor<\/a> that allows you to easily code within your browser, so you  don\u2019t have to flip between your browser and code editor. You can also  save a code reference locally to your computer for later use.<\/p>\n<p>These  are just a few of the extensions you can find in our <a href=\"https:\/\/chrome.google.com\/extensions\/featured\/web_dev\" target=\"_blank\" rel=\"noopener\">extensions  for web development page<\/a>. You can also look for more in the  extensions <a href=\"https:\/\/chrome.google.com\/extensions\/\" target=\"_blank\" rel=\"noopener\">gallery<\/a>.<\/p>\n<p>Written  by Koh Kim, Google Chrome Team<\/p><\/blockquote>\n<p>Reference from:<\/p>\n<p>http:\/\/www.chromium.org\/devtools<\/p>\n<p>http:\/\/feedproxy.google.com\/~r\/blogspot\/amDG\/~3\/E33IhjSqZ4s\/chrome-extensions-for-web-development.html<\/p>\n<p>https:\/\/chrome.google.com\/extensions\/featured\/web_dev<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Chrome Developer Tools are great for debugging HTML &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.intentrust.com\/?p=240\" class=\"more-link\">\u95b1\u8b80\u5168\u6587<span class=\"screen-reader-text\">\u3008Google Chrome Developer Tools\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[55],"_links":{"self":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/posts\/240"}],"collection":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=240"}],"version-history":[{"count":0,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/posts\/240\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}