{"id":25089,"date":"2019-11-20T21:11:33","date_gmt":"2019-11-20T13:11:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25089"},"modified":"2019-11-17T20:36:54","modified_gmt":"2019-11-17T12:36:54","slug":"firefox-developers-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/","title":{"rendered":"10 Useful Firefox Developer Tools You Should Know"},"content":{"rendered":"

Firefox being \"developer\u2019s browser\" has many great tools to help make our work easier. You can find more on its tool collection on the Firefox Developer Tools<\/a> webpage and can also try their Developer Edition Browser<\/a> which has more features and tools that are being tested.<\/p>\n

For this post, I\u2019ve listed 10 handy tools<\/strong> you might like from its developer tools collection. I\u2019ve also demonstrated what these tools can do with GIFs plus how to access them for quick reference.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t40 Firefox Add-ons For Better Productivity<\/a>\n\t\t\t\t<\/p>\n

1. View horizontal and vertical rulers<\/h2>\n
\"Firefox<\/figure>\n

Firefox has a ruler tool that displays both horizontal and vertical rulers with pixel units<\/strong> on the page. The tool is useful for arranging your elements across the page.<\/p>\n

To access rulers through the menu:<\/p>\n

    \n
  1. Go to: \u2630 > Developer<\/strong> > Developer Toolbar<\/strong> (shortcut: Shift<\/span> + F2<\/span>).<\/li>\n
  2. Once the toolbar appears at the bottom of the page, type rulers<\/code>.<\/li>\n
  3. Pess Enter<\/strong>.<\/li>\n<\/ol>\n

    To make this appear on the developer tools window:<\/p>\n

      \n
    1. Go to \"Toolbox Options\".<\/li>\n
    2. Under the \"Available Toolbox Buttons\" section, check the \"Toggle rulers for the page<\/strong>\" checkbox.<\/li>\n<\/ol>\n

      2. Take screenshots using CSS selectors<\/h2>\n
      \"Firefox<\/figure>\n

      Although the Firefox toolbar lets you take screenshots of the full page or visible portions, in my opinion the CSS selector method is more useful for capturing screenshots of individual elements<\/strong> as well as for elements that are visible on mouse-hover<\/strong> only (like menus).<\/p>\n

      To take screenshots through the menu:<\/p>\n

        \n
      1. Go to \u2630 > Developer<\/strong> > Developer Toolbar<\/strong> (shortcutShift<\/span> + F2<\/span>).<\/li>\n
      2. Once the toolbar appears at the bottom of the page, type screenshot --selector any_unique_css_selector<\/code>.<\/li>\n
      3. Press enter<\/strong>.<\/li>\n<\/ol>\n

        To make this appear on the developer tools window:<\/p>\n

          \n
        1. Click \"Toolbox Options\" and under \"Available Toolbox Buttons\" section.<\/li>\n
        2. Check \"Take a fullpage screenshot\"<\/strong> checkbox.<\/li>\n<\/ol>\n

          3. Pick colors from web pages<\/h2>\n
          \"Firefox<\/figure>\n

          Firefox has a built-in color picker tool by the name of \"Eyedropper\".<\/p>\n

          To access the \"Eyedropper\" tool through menu go to \u2630 > Developer<\/strong> > Eyedropper.<\/strong><\/p>\n

          To make this appear on the developer tools window: click \"Toolbox Options\" and under \"Available Toolbox Buttons\" section check \"Grab a color from the page<\/strong>\" checkbox.<\/p>\n

          4. View page layout in 3D<\/h2>\n
          \"Firefox<\/figure>\n

          Viewing webpages in 3D helps with layout problems. You\u2019ll be able to see the different layered elements much more clearly in 3D view. To view the webpage in 3D, click the \"3D View\" tool button.<\/p>\n

          To make this appear on the developer tools window, click \"Toolbox Options\" and under \"Available Toolbox Buttons\" section check the\"3D View<\/strong>\" checkbox.<\/p>\n

          5. View browser style<\/h2>\n
          \"Firefox<\/figure>\n

          Browser Styles consist of two types: the default style a browser assigns for every element, and the browser-specific styles (the ones with the browser prefix). By taking a look at the browser styles you\u2019ll be able to diagnose any override issues in your stylesheet<\/strong> and also come to know of any existing browser specific styles .<\/p>\n

          To access \"Browser styles\" through menu:<\/p>\n

            \n
          1. Go to \u2630 > Developer<\/strong> > Inspector<\/strong>.<\/li>\n
          2. Click the \"Computed\" tab in the right section.<\/li>\n
          3. Check the \"Browser styles\" checkbox.<\/li>\n<\/ol>\n

            You can also open the \"Inspector<\/strong>\" tab through the shortcut Ctrl<\/span> +Shift<\/span> + C<\/span> and then accessing \"Browser styles\".<\/p>\n

            6. Disable JavaScript for current session<\/h2>\n
            \"Firefox<\/figure>\n

            For best practice and screen reader compatibility it is always advised to code any website in such a way that its functionality is not hindered in a javascript-disabled environment. To test for such environments, you can disable the JavaScript for the session you\u2019re working in<\/strong>.<\/p>\n

            To disable JavaScript for current session click \"Toolbox Options\" and under \"Advanced settings\" section check the \"Disable JavaScript<\/strong>*\" checkbox.<\/p>\n

            7. Hide CSS style from the page<\/h2>\n
            \"Firefox<\/figure>\n

            Just like JavaScript, due to accessibility concerns it is best to design websites in such a way that the pages should still be readable even without any styles<\/strong>. To see how the page looks without any style, you can disable them in the developer tools.<\/p>\n

            To remove any CSS style (inline, internal or external) applied on a webpage, just click on the eye symbol of the listed stylesheets<\/strong> in the \"Style Editor\" tab. Click it again to revert to the original view.<\/p>\n

            To access \"Style Editor\" through menu go to \u2630 > Developer<\/strong> > Style Editor<\/strong> (shortcut: Shift<\/span> + F7<\/span>.<\/p>\n

            8. Preview the HTML content response to a request<\/h2>\n
            \"Firefox<\/figure>\n

            Firefox developer tools has an option to preview the HTML content type responses<\/strong>. This helps the developer to preview any 302 redirects and check whether any sensitive information has been rendered or not in the response.<\/p>\n

            To access \"Preview\" through menu:<\/p>\n

              \n
            1. Go to \u2630 > Developer<\/strong> > Network<\/strong> (shortcut: Ctrl<\/span> +Shift<\/span> + Q<\/span>.<\/li>\n
            2. Open the webpage of your choice or reload the current page, click on the desired request (with HTML response)<\/strong> from the list of requests.<\/li>\n
            3. Click the \"Preview<\/strong>\" tab in the right section.<\/li>\n<\/ol>\n

              9. Preview webpage in different screen sizes<\/h2>\n
              \"Firefox<\/figure>\n

              To test a webpage for its responsiveness use the \"Responsive Design View\", which can be accessed by \u2630 > Developer<\/strong> > Responsive Design View<\/strong> or with the shortcut: Ctrl<\/span> +Shift<\/span> + M<\/span>.<\/p>\n

              To make the \"Responsive Design Mode\" tool button appear, click \"Toolbox Options\" and under the \"Available Toolbox Buttons\" section, check \"Responsive Design Mode\" checkbox.<\/p>\n

              10. Run JavaScript on pages<\/h2>\n
              \"Firefox<\/figure>\n

              For quick JavaScript executions on any webpage simply use the \"Scratchpad\" tool of Firefox. To access \"Scratchpad\" through the menu go to; \u2630 > Developer<\/strong> > Scratchpad<\/strong> or use the keyboard shortcut Shift<\/span> + F4<\/span>.<\/p>\n

              To make the \"Scratchpad\" tool button appear on the developer tools window for quick use: click \"Toolbox Options<\/strong>\" and under the \"Available Toolbox Buttons<\/strong>\" section check the \"Scratchpad\" checkbox<\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"

              Firefox being “developer\u2019s browser” has many great tools to help make our work easier. You can find more on its tool collection on the Firefox Developer Tools webpage and can also try their Developer Edition Browser which has more features and tools that are being tested. For this post, I\u2019ve listed 10 handy tools you…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,3398],"tags":[34,316,511],"topic":[4520,4521],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n10 Useful Firefox Developer Tools You Should Know - Hongkiat<\/title>\n<meta name=\"description\" content=\"Firefox being "developer's browser" has many great tools to help make our work easier. You can find more on its tool collection on the Firefox\" \/>\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\/firefox-developers-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Useful Firefox Developer Tools You Should Know\" \/>\n<meta property=\"og:description\" content=\"Firefox being "developer's browser" has many great tools to help make our work easier. You can find more on its tool collection on the Firefox\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/\" \/>\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=\"2019-11-20T13:11:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developers-tools\/ff-rulers.gif\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\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=\"Preethi Ranjit\" \/>\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\\\/firefox-developers-tools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"10 Useful Firefox Developer Tools You Should Know\",\"datePublished\":\"2019-11-20T13:11:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/\"},\"wordCount\":981,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/firefox-developers-tools\\\/ff-rulers.gif\",\"keywords\":[\"Firefox\",\"Web Browsers\",\"Web Developers\"],\"articleSection\":[\"Coding\",\"Internet\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/\",\"name\":\"10 Useful Firefox Developer Tools You Should Know - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/firefox-developers-tools\\\/ff-rulers.gif\",\"datePublished\":\"2019-11-20T13:11:33+00:00\",\"description\":\"Firefox being "developer's browser" has many great tools to help make our work easier. You can find more on its tool collection on the Firefox\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/firefox-developers-tools\\\/ff-rulers.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/firefox-developers-tools\\\/ff-rulers.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developers-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Useful Firefox Developer Tools You Should Know\"}]},{\"@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\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Useful Firefox Developer Tools You Should Know - Hongkiat","description":"Firefox being "developer's browser" has many great tools to help make our work easier. You can find more on its tool collection on the Firefox","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\/firefox-developers-tools\/","og_locale":"en_US","og_type":"article","og_title":"10 Useful Firefox Developer Tools You Should Know","og_description":"Firefox being "developer's browser" has many great tools to help make our work easier. You can find more on its tool collection on the Firefox","og_url":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-11-20T13:11:33+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/firefox-developers-tools\/ff-rulers.gif","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"10 Useful Firefox Developer Tools You Should Know","datePublished":"2019-11-20T13:11:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/"},"wordCount":981,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/firefox-developers-tools\/ff-rulers.gif","keywords":["Firefox","Web Browsers","Web Developers"],"articleSection":["Coding","Internet"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/","url":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/","name":"10 Useful Firefox Developer Tools You Should Know - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/firefox-developers-tools\/ff-rulers.gif","datePublished":"2019-11-20T13:11:33+00:00","description":"Firefox being "developer's browser" has many great tools to help make our work easier. You can find more on its tool collection on the Firefox","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/firefox-developers-tools\/ff-rulers.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/firefox-developers-tools\/ff-rulers.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developers-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Useful Firefox Developer Tools You Should Know"}]},{"@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\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6wF","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25089","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\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25089"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25089\/revisions"}],"predecessor-version":[{"id":49049,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25089\/revisions\/49049"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25089"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}