{"id":24364,"date":"2010-05-27T00:00:00","date_gmt":"2010-05-27T00:00:00","guid":{"rendered":"https:\/\/alienroad.com\/google-bilgi-bankasi\/chrome-extensions-for-web-development\/"},"modified":"2010-05-27T00:00:00","modified_gmt":"2010-05-27T00:00:00","slug":"chrome-extensions-for-web-development","status":"publish","type":"ar_kb","link":"https:\/\/alienroad.com\/google-bilgi-bankasi\/chrome-extensions-for-web-development\/","title":{"rendered":"Chrome Extensions for web development"},"content":{"rendered":"<aside class=\"key-point\">It&#8217;s been a while since we published this blog post. Some of the information may be outdated (for example, some images may be missing, and some links may not work anymore).<\/aside>\n<p class=\"gargardate\">Thursday, May 27, 2010<\/p>\n<p>\n  The<br \/>\n  <a href=\"https:\/\/www.chromium.org\/devtools\" class=\"external-link\">Chrome Developer Tools<\/a><br \/>\n  are great for debugging HTML, JavaScript and CSS in Chrome. If you&#8217;re writing a webpage or even a<br \/>\n  web app for the<br \/>\n  <a href=\"https:\/\/chrome.google.com\/webstore\" class=\"external-link\">Chrome Web Store<\/a>, you can<br \/>\n  inspect elements in the DOM, debug live JavaScript, and edit CSS styles directly in the current<br \/>\n  page. Extensions can make Google Chrome an even better web development environment by providing<br \/>\n  additional features that you can easily access in your browser. To help developers like you, we<br \/>\n  created a page that<br \/>\n  <a href=\"https:\/\/chrome.google.com\/extensions\/featured\/web_dev\" class=\"external-link\">features extensions for web development<\/a>.<br \/>\n  We hope you&#8217;ll find them useful in creating applications and sites for the web.\n<\/p>\n<p><img decoding=\"async\" alt=\"speed tracer chrome extension\" src=\"https:\/\/alienroad.com\/wp-content\/uploads\/kb-gorsel\/g-efc44ec18af4.png\" loading=\"lazy\"><\/p>\n<p>\n  For example,<br \/>\n  <a href=\"https:\/\/chrome.google.com\/extensions\/detail\/ognampngfcbddbfemdapefohjiobgbdl\" class=\"external-link\">Speed Tracer<\/a><br \/>\n  is an extension to help you identify and fix performance issues in your web applications. With<br \/>\n  Speed Tracer, you can get a better idea of where time is being spent in your application and<br \/>\n  troubleshoot problems in JavaScript parsing and execution, CSS style, and more.\n<\/p>\n<p><img decoding=\"async\" alt=\"resolution tester chrome extension\" src=\"https:\/\/alienroad.com\/wp-content\/uploads\/kb-gorsel\/g-99cd3839752e.png\" loading=\"lazy\"><\/p>\n<p>\n  Another useful extension is the<br \/>\n  <a href=\"https:\/\/chrome.google.com\/extensions\/detail\/idhfcdbheobinplaamokffboaccidbal\" class=\"external-link\">Resolution Test<\/a><br \/>\n  that changes the size of the browser window, so web developers can preview websites in different<br \/>\n  screen resolutions. It also includes a list of commonly used resolutions, as well as a custom<br \/>\n  option to input your own resolution.\n<\/p>\n<p><img decoding=\"async\" alt=\"web developer chrome extension\" src=\"https:\/\/alienroad.com\/wp-content\/uploads\/kb-gorsel\/g-f499d713cfab.png\" loading=\"lazy\"><\/p>\n<p>\n  With the<br \/>\n  <a href=\"https:\/\/chrome.google.com\/extensions\/detail\/bfbameneiokkgbdmiekhjnmfkcnldhhm\" class=\"external-link\">Web Developer<\/a><br \/>\n  extension, you can access additional developer tools such as validation options, page resizing<br \/>\n  and a CSS elements viewer; all from an additional button in the toolbar.\n<\/p>\n<p><img decoding=\"async\" alt=\"chrome editor chrome extension\" src=\"https:\/\/alienroad.com\/wp-content\/uploads\/kb-gorsel\/g-87c3902558f7.png\" loading=\"lazy\"><\/p>\n<p>\n  Another extension you should check out is the<br \/>\n  <a href=\"https:\/\/chrome.google.com\/extensions\/detail\/nglgdmkkiemejlladcdjegcllaieegoe\" class=\"external-link\">Chrome Editor<\/a><br \/>\n  that allows you to easily code within your browser, so you don&#8217;t have to flip between your browser<br \/>\n  and code editor. You can also save a code reference locally to your computer for later use.\n<\/p>\n<p>\n  These are just a few of the extensions you can find in our<br \/>\n  <a href=\"https:\/\/chrome.google.com\/extensions\/featured\/web_dev\" class=\"external-link\">extensions for web development page<\/a>.<br \/>\n  You can also look for more in the extensions<br \/>\n  <a href=\"https:\/\/chrome.google.com\/extensions\/\" class=\"external-link\">gallery<\/a>.<\/p>\n<p class=\"byline-author\">Written by Koh Kim, Google Chrome Team<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s been a while since we published this blog post. Some of the information may be outdated (for example, some images may be missing, and some links may not work anymore). Thursday, May 27, 2010 The Chrome Developer Tools are great for debugging HTML, JavaScript and CSS in Chrome. If you&#8217;re writing a webpage or [&hellip;]<\/p>\n","protected":false},"menu_order":85244,"template":"","meta":{"footnotes":""},"ar_kb_kategori":[665],"ar_kb_etiket":[],"class_list":["post-24364","ar_kb","type-ar_kb","status-publish","has-post-thumbnail","hentry","ar_kb_kategori-blog"],"_links":{"self":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb\/24364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb"}],"about":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/types\/ar_kb"}],"version-history":[{"count":0,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb\/24364\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/media\/26794"}],"wp:attachment":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/media?parent=24364"}],"wp:term":[{"taxonomy":"ar_kb_kategori","embeddable":true,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb_kategori?post=24364"},{"taxonomy":"ar_kb_etiket","embeddable":true,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb_etiket?post=24364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}