{"id":24744,"date":"2015-09-21T23:01:57","date_gmt":"2015-09-21T15:01:57","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24744"},"modified":"2020-06-30T01:16:11","modified_gmt":"2020-06-29T17:16:11","slug":"edge-f12-vs-firefox-chrome","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/","title":{"rendered":"DevTools Showdown: Edge&#8217;s F12 vs Firefox vs Chrome"},"content":{"rendered":"<p>The Developer Tools of <a href=\"https:\/\/www.hongkiat.com\/blog\/microsoft-edge-features\/\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft Edge<\/a>, the new default browser of Windows 10 got a modern design and a few new features compared to its predecessor, <a href=\"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/\">Internet Explorer 11<\/a>\u2018s F12 Dev Tools.<\/p>\n<p>The question of whether Microsoft Edge\u2019s dev tools measure up to their popular competitors \u2013 the dev tools in other modern browsers such as Mozilla Firefox and <a href=\"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/\">Google Chrome<\/a> \u2013 naturally arises in the minds of many developers.<\/p>\n<p>In this post we try to answer this question, and figure out if Edge\u2019s F12 Dev Tools are really worth to use. We will compare its features to those of Firefox\u2019s <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Tools\" target=\"_blank\" rel=\"noopener noreferrer\">Developer Tools<\/a> and Google Chrome\u2019s <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\" target=\"_blank\" rel=\"noopener noreferrer\">DevTools<\/a>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/chrome-devtools-app-remote-debugging\/\" class=\"ref-block__link\" title=\"Read More: How to Enable Chrome DevTools App for Remote Debugging\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Enable Chrome DevTools App for Remote Debugging<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/chrome-devtools-app-remote-debugging.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-23583 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/chrome-devtools-app-remote-debugging.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Enable Chrome DevTools App for Remote Debugging<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThe Chrome DevTools App was created by Kenneth Auchenberg to bring devtools out of the Chrome browser. This...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Open the Dev Tools<\/h2>\n<p>Pressing F12 opens the developer tools in all 3 cases: Developer Tools in Firefox, DevTools in Chrome, and F12 Dev Tools in Microsoft Edge. This is the keyboard shortcut where the <strong>official name of Edge\u2019s F12 Dev Tools<\/strong> comes from.<\/p>\n<p>When you open Edge\u2019s Dev Tools you can experience at once one of its most well-known shortcomings: currently it\u2019s <strong>impossible to pin the tools to an existing window<\/strong>. While you can follow what\u2019s happening on the screen on Firefox Developer Tools and Chrome DevTools by pinning the dev tools window to the bottom of the screen, you (currently) can\u2019t do the same with Edge.<\/p>\n<p>Microsoft\u2019s developers <a href=\"https:\/\/stackoverflow.com\/\/questions\/31715108\/how-to-pin-unpin-microsoft-edge-developer-tools-in-windows-10\/#answer-31735963\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">claim<\/a> they will fix this issue in a future update.<\/p>\n<h2>Inspect the DOM<\/h2>\n<p>The <strong>DOM Explorer<\/strong> tool (Shortcut: <span class=\"key\">CTRL<\/span> + <span class=\"key\">1<\/span>) is the first tab of Microsoft Edge\u2019s F12 Dev Tools. Its layout and overall design is quite similar to the <em>Element<\/em> tab of Chrome and the <em>Inspector<\/em> tab in Firefox, however the capabilities sightly differ.<\/p>\n<p>In Edge you can take a look at the rendered HTML document, the related CSS styles, and the event handlers registered on each element. You can also find the small graphic about the CSS box model with the computed values, already well known from the two competing browsers.<\/p>\n<p>You can <strong>experiment with CSS rules<\/strong> by deleting current ones and adding new ones, and you can see your <strong>summarized changes<\/strong> on a separate subtab called \u201cChanges\u201d (it\u2019s located on the left-hand side). This latter is a feature that is not built in Firefox Developer nor Chrome DevTools. It can give a quick recap to the user, so it\u2019s a really useful option.<\/p>\n<p>There are some features in Firefox Developer Tools that neither Edge, nor Google Chrome currently provide, but can significantly help the life of a designer: <strong>the Font and the Animation analyzer tools<\/strong>.<\/p>\n<p>In Edge there\u2019s a <strong>cool colour picker<\/strong> though that may somewhat compensate the user for it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/dom-explorer.jpg\" alt=\"DOM Explorer\" width=\"700\" height=\"476\"><\/figure>\n<h2>Interact with JavaScript<\/h2>\n<p>The <strong>Console<\/strong> tab (Shortcut: <span class=\"key\">CTRL<\/span> + <span class=\"key\">2<\/span>) in Microsoft Edge allows you to interact with the JavaScript of your site, just like in Firefox and Chrome Dev Tools. All three allow you to follow JavaScript errors in real-time and you can also analyze them by entering your own input.<\/p>\n<p>The Console tool of Edge\u2019s F12 Dev Tools has a nice <strong>autocomplete feature<\/strong> that helps you with the commands, however it seems to be <strong>less knowledgeable<\/strong> compared to the one in Firefox and Chrome Dev Tools.<\/p>\n<p>Edge <strong>separates Errors, Warnings, and Messages<\/strong> which is a big help, though not something that the other two toolkits don\u2019t have.<\/p>\n<p>Firefox\u2019s Console seems to be the most professional out of the three dev tools, as it also <strong>separately shows other kind of problems: network, CSS, security errors and logging messages<\/strong>, and allows you to interact with these through the <strong>Console interface<\/strong>, not just with the JavaScript errors.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/console.jpg\" alt=\"Console\" width=\"700\" height=\"476\"><\/figure>\n<h2>Understand What Your Code Is Doing<\/h2>\n<p>The <strong>Debugger<\/strong> tool (Shortcut: <span class=\"key\">CTRL<\/span> + <span class=\"key\">3<\/span>) helps you understand what is happening to your code while finding potential bugs. You can set watches and breakpoints, and view call stacks.<\/p>\n<p>The Watches pane displays variable values, the Callstack mode shows the chain of function calls that led to the current state, and the Breakpoints mode shows a list of the breakpoints you\u2019ve set.<\/p>\n<p>Edge\u2019s F12 Dev Tools let you <strong>pause your code <\/strong>in the middle of execution, and step through it line by line. You also have the option to <strong>improve the readability of a compiled or minified JavaScript file<\/strong>, and you can <strong>debug different resources<\/strong> (JavaScript, extensions, etc.) one by one.<\/p>\n<p>Firefox and Chrome DevTools provide all these functionalities, so Edge doesn\u2019t offer an exceptional debugging experience, but it provides the user with a solid and reliable tool that is in par with its competitors.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/debugger.jpg\" alt=\"Debugger\" width=\"700\" height=\"476\"><\/figure>\n<h2>Take A Look At The Browser-Server Communication<\/h2>\n<p>The <strong>Network<\/strong> tool (Shortcut: <span class=\"key\">CTRL<\/span> + <span class=\"key\">4<\/span>) has been completely redesigned for Microsoft Edge since Internet Explorer 11. With the help of this handy tool you can <strong>follow the communication between the server and the browser<\/strong>, and inspect the individual requests.<\/p>\n<p>You can <strong>filter the results by content type<\/strong> such as stylesheets, images, media, fonts, XHR, and many others. You can also <strong>debug AJAX<\/strong> with the help of the Network tool.<\/p>\n<p>Edge\u2019s and Firefox\u2019s Network tab offer quite similar capabilities and user interface. Both has a user-friendly sidebar pane that allows you to take a look at the selected resource\u2019s HTTP header, HTTP body, parameters, related cookies and timings item-by-item.<\/p>\n<p>Chrome DevTools\u2019 Network tab doesn\u2019t have a pane like this, but if you click on the requests one-by-one you can see the same information. It\u2019s a less intuitive solution though.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/network.jpg\" alt=\"Network\" width=\"700\" height=\"476\"><\/figure>\n<h2>Track Down Slow Pages<\/h2>\n<p>The <strong>Performance<\/strong> tab (Shortcut: <span class=\"key\">CTRL<\/span> + <span class=\"key\">5<\/span>) helps you understand the reasons behind a slow web page. With the Performance tool Microsoft took a huge leap forward by combining the previous <strong>UI Responsiveness and Profiler<\/strong> tools to create an end-to-end view of all your scripting, and visualizing the performance.<\/p>\n<p>This handy tool provides you with reports on <strong>different types of CPU usage<\/strong>, gives you insights into your site\u2019s frame paint, and it\u2019s also possible to <strong>isolate different user scenarios by setting labels on the timeline<\/strong>.<\/p>\n<p>During the testing process we found that the Performance tool in Edge provided us with <strong>more information about speed issues<\/strong> than either Firefox Developer or Chrome DevTools. The user interface of the Performance tab in Edge is quite well-designed, helping us with many visual cues, and it\u2019s relatively easy-to-use. If you want to know more about how to use it, read the detailed <a href=\"https:\/\/learn.microsoft.com\/en-us\/previous-versions\/windows\/desktop\/legacy\/hh968260(v=vs.85)\" target=\"_blank\" rel=\"noopener noreferrer\">Docs<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/performance.jpg\" alt=\"Performance\" width=\"700\" height=\"476\"><\/figure>\n<h2>Diagnose Memory Issues<\/h2>\n<p>The <strong>Memory<\/strong> tool (Shortcut: <span class=\"key\">CTRL<\/span> + <span class=\"key\">6<\/span>) makes it possible to <strong>find memory leaks<\/strong> that can also slow down your web page, moreover can <strong>impact the stability<\/strong> of your site.<\/p>\n<p>With the help of a nice graph you can easily understand where your memory usage is growing, and you can make snapshots at specific points that make it possible to analyze the memory use. You can also <strong>compare two snapshots made at different points<\/strong> of the page lifecycle to understand the difference between them.<\/p>\n<p>Chrome DevTools also have a nice memory profiler under the Profiles tab, while Firefox Developer doesn\u2019t provide this feature by default, but you can download and install addons like <a href=\"https:\/\/github.com\/past\/memory-profiler\" target=\"_blank\" rel=\"noopener noreferrer\">this<\/a> if you want. The memory profiler of Chrome DevTools is quite advanced and offers more features than Edge\u2019s, for example it allows you to <strong>record JavaScript object allocations over time<\/strong> that can help you isolate memory leaks.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/memory.jpg\" alt=\"Memory\" width=\"700\" height=\"495\"><\/figure>\n<h2>Test Your Site On Different Screen Sizes<\/h2>\n<p>The <strong>Emulation<\/strong> tool (Shortcut: <span class=\"key\">CTRL<\/span> + <span class=\"key\">7<\/span>) enables you to test your site under different circumstances. You can choose from two browser profiles, Desktop and Windows 10 Mobile, and from many different user agents including all desktop and mobile versions of Internet Explorer back to IE6, alongisde many of Edge\u2019s competitors, Chrome, Firefox, Safari, etc.<\/p>\n<p>It\u2019s interesting that you have the option to take a <strong>look at your page as a Bing Bot<\/strong>. You can also <strong>emulate a GPS<\/strong>, and set <strong>different resolutions and orientations<\/strong>.<\/p>\n<p>Firefox Developer Tools doesn\u2019t have a device emulation tool, but Chrome DevTools have such a sophisticated emulator that Edge\u2019s can hardly compete with it.<\/p>\n<p>For example Chrome\u2019s emulation screen has an <strong>accurate grid where the emulated view is inserted in,<\/strong> and you not only can choose from browser profiles and user agents, but also from many devices such as the <strong>different versions<\/strong> of iPhone or Samsung Galaxy and many others. Chrome DevTools\u2019 emulator also has a handy <strong>Zoom option<\/strong> and you can test your site on different networks like 3G, 4G, DSL, WiFi, etc.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/emulation.jpg\" alt=\"Emulation\" width=\"700\" height=\"414\"><\/figure>\n<h2>Summary<\/h2>\n<p>On the whole, Microsoft Edge\u2019s F12 Dev Tools seems to be suprisingly good. It provides features quite similar to the popular web development toolkits of other modern browsers. There are two areas where Edge\u2019s F12 Dev Tools is quite strong: the <strong>user interface<\/strong> that is really <strong>intuitive, user-friendly, and well-designed<\/strong>, and the <strong>performance diagnostic tools<\/strong>.<\/p>\n<p>For these two features it may be worth to consider switching to, or at least testing Edge. The biggest shortcoming is the lack of the possibility to pin the dev tools to the bottom of the screen, but let\u2019s hope Microsoft will quickly fix this issue.<\/p>","protected":false},"excerpt":{"rendered":"<p>The Developer Tools of Microsoft Edge, the new default browser of Windows 10 got a modern design and a few new features compared to its predecessor, Internet Explorer 11\u2018s F12 Dev Tools. The question of whether Microsoft Edge\u2019s dev tools measure up to their popular competitors \u2013 the dev tools in other modern browsers such&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[1258,2856,34,55,3590],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>DevTools Showdown: Edge&#039;s F12 vs Firefox vs Chrome - Hongkiat<\/title>\n<meta name=\"description\" content=\"The Developer Tools of Microsoft Edge, the new default browser of Windows 10 got a modern design and a few new features compared to its predecessor,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DevTools Showdown: Edge&#039;s F12 vs Firefox vs Chrome\" \/>\n<meta property=\"og:description\" content=\"The Developer Tools of Microsoft Edge, the new default browser of Windows 10 got a modern design and a few new features compared to its predecessor,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-21T15:01:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-29T17:16:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/dom-explorer.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"DevTools Showdown: Edge&#8217;s F12 vs Firefox vs Chrome\",\"datePublished\":\"2015-09-21T15:01:57+00:00\",\"dateModified\":\"2020-06-29T17:16:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/\"},\"wordCount\":1477,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/edge-f12-vs-firefox-chrome\\\/dom-explorer.jpg\",\"keywords\":[\"Chrome\",\"Dev Tools\",\"Firefox\",\"Microsoft\",\"Microsoft Edge\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/\",\"name\":\"DevTools Showdown: Edge's F12 vs Firefox vs Chrome - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/edge-f12-vs-firefox-chrome\\\/dom-explorer.jpg\",\"datePublished\":\"2015-09-21T15:01:57+00:00\",\"dateModified\":\"2020-06-29T17:16:11+00:00\",\"description\":\"The Developer Tools of Microsoft Edge, the new default browser of Windows 10 got a modern design and a few new features compared to its predecessor,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/edge-f12-vs-firefox-chrome\\\/dom-explorer.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/edge-f12-vs-firefox-chrome\\\/dom-explorer.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/edge-f12-vs-firefox-chrome\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DevTools Showdown: Edge&#8217;s F12 vs Firefox vs Chrome\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"DevTools Showdown: Edge's F12 vs Firefox vs Chrome - Hongkiat","description":"The Developer Tools of Microsoft Edge, the new default browser of Windows 10 got a modern design and a few new features compared to its predecessor,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/","og_locale":"en_US","og_type":"article","og_title":"DevTools Showdown: Edge's F12 vs Firefox vs Chrome","og_description":"The Developer Tools of Microsoft Edge, the new default browser of Windows 10 got a modern design and a few new features compared to its predecessor,","og_url":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-09-21T15:01:57+00:00","article_modified_time":"2020-06-29T17:16:11+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/dom-explorer.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"DevTools Showdown: Edge&#8217;s F12 vs Firefox vs Chrome","datePublished":"2015-09-21T15:01:57+00:00","dateModified":"2020-06-29T17:16:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/"},"wordCount":1477,"commentCount":4,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/dom-explorer.jpg","keywords":["Chrome","Dev Tools","Firefox","Microsoft","Microsoft Edge"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/","url":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/","name":"DevTools Showdown: Edge's F12 vs Firefox vs Chrome - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/dom-explorer.jpg","datePublished":"2015-09-21T15:01:57+00:00","dateModified":"2020-06-29T17:16:11+00:00","description":"The Developer Tools of Microsoft Edge, the new default browser of Windows 10 got a modern design and a few new features compared to its predecessor,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/dom-explorer.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/edge-f12-vs-firefox-chrome\/dom-explorer.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/edge-f12-vs-firefox-chrome\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"DevTools Showdown: Edge&#8217;s F12 vs Firefox vs Chrome"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6r6","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24744"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24744\/revisions"}],"predecessor-version":[{"id":51846,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24744\/revisions\/51846"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24744"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}