{"id":19690,"date":"2014-03-27T23:01:40","date_gmt":"2014-03-27T15:01:40","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19690"},"modified":"2025-04-04T01:43:26","modified_gmt":"2025-04-03T17:43:26","slug":"internet-explorer-devtools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/","title":{"rendered":"A Look Into: Internet Explorer 11 DevTools"},"content":{"rendered":"<p>The Internet Explorer in-browser Developer Tools (IE DevTools) has long been lacking several critical functionalities for debugging, making it nearly useless. This includes the inability to inspect elements in different state like <code>:hover<\/code>, <code>:active<\/code>, <code>:focus<\/code>, and <code>:visited<\/code> \u2013 at least not in an easy intuitive way. Long story short, it is hard and frustrating to debug in Internet Explorer.<\/p>\n<p>But starting with <strong><a href=\"https:\/\/support.microsoft.com\/en-us\/windows\/internet-explorer-downloads-d49e1f0d-571c-9a7b-d97e-be248806ca70\" rel=\"nofollow\">Internet Explorer 11<\/a><\/strong>, the IE DevTools has finally got a facelift in its existing features as well as a few new functionalities. Let\u2019s take a look at what it now has to offer.<\/p>\n<p class=\"note\"><strong>Recommended Reading: <\/strong><a href=\"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/\">5 (More) Useful Chrome DevTools Tips For Developers<\/a><\/p>\n<h2>Getting Started<\/h2>\n<p>Internet Explorer 11 is shipped along with Windows 8. If you are still using Windows 7 and haven\u2019t yet updated IE, you can <a href=\"https:\/\/support.microsoft.com\/en-us\/windows\/internet-explorer-downloads-d49e1f0d-571c-9a7b-d97e-be248806ca70\" rel=\"nofollow\">download the installer here<\/a>. Launch the installer, then follow the installation instructions.<\/p>\n<p>Once it has been installed, launch Internet Explorer 11, and press the <span class=\"key\">F12<\/span> button to launch the DevTools. As we have mentioned and seen below, the new DevTools has a totally redesigned look, compared to earlier versions.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/before-and-after.jpg\" alt=\"before after\" width=\"500\" height=\"320\"><\/figure>\n<p>In addition, although this kind of menu has also been available in the other browsers for a while, IE 11 has also included the \u201c<strong>Inspect Element<\/strong>\u201d on the right-click menu to quickly bring up the DevTools.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/new-inspect-menu.jpg\" alt=\"new inspect menu\" width=\"500\" height=\"180\"><\/figure>\n<h2>DOM Explorer<\/h2>\n<p>The DOM Explorer also got some improvements. First, you will find that it now has \u201cbreadcrumbs\u201d at the bottom, which makes navigating through the DOM hierarchy much leaner. It also allows us to <strong>move elements within the DOM simply by dragging and dropping<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/dom-inspector.jpg\" alt=\"dom inspector\" width=\"500\" height=\"320\"><\/figure>\n<h2>Styles Tab<\/h2>\n<p>At the right side of the DOM Explorer pane, similar to the other Browsers DevTools, you will find the <strong>Styles<\/strong> tab with all the CSS rules that are applied to the DOM elements. It is now also equipped with <a href=\"https:\/\/docs.microsoft.com\/en-gb\/\" rel=\"nofollow\">Intellisense<\/a>. So, as we type codes in CSS, JavaScript, and HTML, it will show a list of input suggestions to complete the code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/intellisense.jpg\" alt=\"intellisense\" width=\"500\" height=\"120\"><\/figure>\n<p>It now also puts the styles that are currently applied at the top, instead of buried at the very bottom (which forces us to scroll). This makes debugging CSS quicker and more intuitive.<\/p>\n<h2>Trace Tab<\/h2>\n<p>In the <strong>Trace<\/strong> tab, you can immediately discover which styles are applied to the element, and which styles are overridden.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/trace-tab.jpg\" alt=\"trace tab\" width=\"500\" height=\"230\"><\/figure>\n<p>If you find your website styling output  not appearing as expected, this is the tab that you should inspect.<\/p>\n<h2>Layout Tab<\/h2>\n<p>Furthermore, in the <strong>Layout<\/strong> tab, you will also see the box diagram and box property information: width, height padding, margin and borders. Now, this tab is not merely showing information staticly, we can now also edit the values of these properties.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/box-model.jpg\" alt=\"box model\" width=\"500\" height=\"230\"><\/figure>\n<h2>New Console API<\/h2>\n<p>Aside, from the user interface and user experience aspects, Internet Explorer 11 also introduced a number of new Console APIs including <code>console.time<\/code> and <code>console.timeEnd<\/code> method. You can use these two methods to <strong>track execution time of JavaScript functions or code blocks<\/strong>, for example:<\/p>\n<pre>\r\nconsole.time('loop');\r\nvar index;\r\nvar a = [\"a\", \"b\", \"c\"];\r\nfor (index = 0; index &lt; a.length; ++index) {\r\n    console.log(a[index]);\r\n}\r\nconsole.timeEnd('loop');\r\n<\/pre>\n<p>See the <a href=\"https:\/\/docs.microsoft.com\/en-gb\/\" rel=\"nofollow\">complete list of new Console API in this page<\/a>.<\/p>\n<h2>The Mobile Emulator<\/h2>\n<p>With the increasing usage of mobile devices as well as websites that are created for Mobile platforms, it is now very reasonable to include a feature in IE DevTools to support the development process. Check out the <strong>IE Mobile Emulator.<\/strong><\/p>\n<p>In the Emulation panel, you can configure the document and browser mode, display orientation, viewport size and Geolocation, which allows you to override your current location coordinates.<\/p>\n<p>It works similar to the Emulation Tool in Chrome DevTools, so check out our previous article on <a href=\"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/\">5 (More) Useful Chrome DevTools Tips For Developers<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/emulator.jpg\" alt=\"emulator\" width=\"500\" height=\"350\"><\/figure>\n<h2>Final Thought<\/h2>\n<p>Over all, I\u2019m glad to see that Microsoft has finally put serious attention in Internet Explorer. Aside from the capability to render some cutting-edge <a href=\"https:\/\/www.hongkiat.com\/blog\/building-html5-css-webpages\/\">CSS3 and HTML5<\/a> spec, the DevTools in Internet Explorer 11, as we can see above, comes with significant improvements in some areas.<\/p>\n<p>However, in term of features, it still is behind the other browsers. <strong>The option for viewing elements in different state<\/strong> as mentioned at the beginning of the post <strong>is still missing<\/strong>. For those who work with CSS a lot, like me, this feature is essential.<\/p>","protected":false},"excerpt":{"rendered":"<p>The Internet Explorer in-browser Developer Tools (IE DevTools) has long been lacking several critical functionalities for debugging, making it nearly useless. This includes the inability to inspect elements in different state like :hover, :active, :focus, and :visited \u2013 at least not in an easy intuitive way. Long story short, it is hard and frustrating to&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2856,174],"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>A Look Into: Internet Explorer 11 DevTools - Hongkiat<\/title>\n<meta name=\"description\" content=\"The Internet Explorer in-browser Developer Tools (IE DevTools) has long been lacking several critical functionalities for debugging, making it nearly\" \/>\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\/internet-explorer-devtools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look Into: Internet Explorer 11 DevTools\" \/>\n<meta property=\"og:description\" content=\"The Internet Explorer in-browser Developer Tools (IE DevTools) has long been lacking several critical functionalities for debugging, making it nearly\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/\" \/>\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=\"2014-03-27T15:01:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:43:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/before-and-after.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look Into: Internet Explorer 11 DevTools\",\"datePublished\":\"2014-03-27T15:01:40+00:00\",\"dateModified\":\"2025-04-03T17:43:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/\"},\"wordCount\":676,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/internet-explorer-devtools\\\/before-and-after.jpg\",\"keywords\":[\"Dev Tools\",\"IE\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/\",\"name\":\"A Look Into: Internet Explorer 11 DevTools - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/internet-explorer-devtools\\\/before-and-after.jpg\",\"datePublished\":\"2014-03-27T15:01:40+00:00\",\"dateModified\":\"2025-04-03T17:43:26+00:00\",\"description\":\"The Internet Explorer in-browser Developer Tools (IE DevTools) has long been lacking several critical functionalities for debugging, making it nearly\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/internet-explorer-devtools\\\/before-and-after.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/internet-explorer-devtools\\\/before-and-after.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/internet-explorer-devtools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into: Internet Explorer 11 DevTools\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Look Into: Internet Explorer 11 DevTools - Hongkiat","description":"The Internet Explorer in-browser Developer Tools (IE DevTools) has long been lacking several critical functionalities for debugging, making it nearly","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\/internet-explorer-devtools\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into: Internet Explorer 11 DevTools","og_description":"The Internet Explorer in-browser Developer Tools (IE DevTools) has long been lacking several critical functionalities for debugging, making it nearly","og_url":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-03-27T15:01:40+00:00","article_modified_time":"2025-04-03T17:43:26+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/before-and-after.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look Into: Internet Explorer 11 DevTools","datePublished":"2014-03-27T15:01:40+00:00","dateModified":"2025-04-03T17:43:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/"},"wordCount":676,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/before-and-after.jpg","keywords":["Dev Tools","IE"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/","url":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/","name":"A Look Into: Internet Explorer 11 DevTools - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/before-and-after.jpg","datePublished":"2014-03-27T15:01:40+00:00","dateModified":"2025-04-03T17:43:26+00:00","description":"The Internet Explorer in-browser Developer Tools (IE DevTools) has long been lacking several critical functionalities for debugging, making it nearly","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/before-and-after.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/internet-explorer-devtools\/before-and-after.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/internet-explorer-devtools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into: Internet Explorer 11 DevTools"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-57A","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19690","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19690"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19690\/revisions"}],"predecessor-version":[{"id":73670,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19690\/revisions\/73670"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19690"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}