{"id":70710,"date":"2023-12-19T21:01:17","date_gmt":"2023-12-19T13:01:17","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=70710"},"modified":"2023-12-18T07:57:24","modified_gmt":"2023-12-17T23:57:24","slug":"chrome-devtool-features","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/","title":{"rendered":"9 Useful Chrome DevTools Features for Developers"},"content":{"rendered":"

Google Chrome\u2019s built-in Chrome DevTools are a treasure trove for web developers. These tools enable you to modify web pages in real time, identify issues swiftly, and streamline the process of creating top-notch websites.<\/p>\n

\"Chrome<\/figure>\n

Chrome DevTools are not just debugging tools; they\u2019re a comprehensive suite of utilities designed to inspect website code, execute scripts, track network requests, and enhance your web application\u2019s performance.<\/p>\n

This article unveils 9 useful Chrome DevTools features, each designed to simplify and enhance your web development experience. Whether you\u2019re a seasoned developer or just starting out, this set of features will come in handy for debugging and coding.<\/p>\n

1. Unminify JavaScript for Easier Debugging<\/h2>\n

Minifying code is a common practice that greatly reduces file size by removing unnecessary spaces and indentations. While this makes files smaller and faster for browsers to load, it can turn into a nightmare for developers to read and debug. Chrome DevTools simplifies this process with its unminify feature.<\/p>\n

    \n
  1. Open Chrome DevTools.<\/li>\n
  2. Navigate to the \u201cSources\u201d<\/strong> tab.<\/li>\n
  3. From the left file explorer tab, select a minified JavaScript file.<\/li>\n
  4. Click on the {}<\/code> icon located at the bottom of the file editor.<\/li>\n
  5. The file will be unminified, making it easier to read and debug.<\/li>\n<\/ol>\n
    \"Demonstration<\/figure>\n

    2. Record and Play User Flow<\/h2>\n

    For developers, testing how a website responds to different user journeys is crucial. These user flows represent the paths that users take while navigating your site. Manually testing these flows can be tedious, requiring repetitive actions to simulate user behavior.<\/p>\n

    Chrome DevTools offers a solution by allowing you to record and replay user flows. This feature saves considerable time in optimizing your code for various user interactions. It also helps in measuring key metrics related to these flows.<\/p>\n

    To record a user flow:<\/p>\n

      \n
    1. Open Chrome DevTools and go to the \u201cRecorder\u201d<\/strong> tab.<\/li>\n
    2. Start a new recording by clicking the \u201cCreate a new recording\u201d<\/strong> button.<\/li>\n
      \"Starting<\/figure>\n
    3. Give the recording a distinctive name for easy identification.<\/li>\n
    4. Press the record button.<\/li>\n
    5. Perform the desired user actions, such as button clicks and page navigations; these will be captured.<\/li>\n
    6. Once completed, click the end recording button.<\/li>\n
    7. The recorded user flow is now ready for automated testing, eliminating the need for manual repetition.<\/li>\n<\/ol>\n

      If the \u201cRecorder\u201d<\/strong> tab isn\u2019t visible, click on the triple dot icon at the top right, and then navigate to \u201cMore tools\u201d<\/strong> > \u201cRecorder\u201d<\/strong>.<\/p>\n

      \"Locating<\/figure>\n

      3. Filtering Network Requests<\/h2>\n

      Chrome DevTools simplifies the task of filtering network requests.<\/p>\n

        \n
      1. Open the \u201cNetwork\u201d<\/strong> tab in Chrome DevTools.<\/li>\n
      2. Click on the funnel icon to access a range of filter options for the website\u2019s network requests.<\/li>\n<\/ol>\n

        Filtering can be done by entering relevant text in the filter input. For instance, typing \u201ccss\u201d<\/strong> will show only CSS files or files containing the word \u201ccss\u201d<\/strong>. You can also use regular expressions for more specific searches.<\/p>\n

        \"Network<\/figure>\n

        For domain-specific filtering, enter \u2018domain:\u2019<\/strong> followed by the domain name in the filter input. This will isolate requests to that specific domain, providing a focused view of network activity.<\/p>\n

        \"Domain-specific<\/figure>\n

        4. Network Speed Throttling<\/h2>\n

        Understanding your website\u2019s performance under various network conditions is essential. Chrome DevTools assists with this by providing network speed throttling options.<\/p>\n

        In the \u201cNetwork\u201d<\/strong> tab, you can find four default throttling options: No Throttling, Fast 3G, Slow 3G, and Offline. Testing your website with each of these settings helps you evaluate and enhance its performance, particularly under slower network speeds.<\/p>\n

        This feature is especially useful for developers of Progressive Web Applications<\/a> (PWAs), as it enables testing the app\u2019s behavior in offline scenarios.<\/p>\n

        \"Network<\/figure>\n

        5. Identifying Unused JavaScript<\/h2>\n

        Chrome DevTools also made Locating unused JavaScript on your website is made easier, and here\u2019s how:<\/p>\n

          \n
        1. Press Control<\/span> + Shift<\/span>+ P<\/span> (Mac: Command<\/span> + Shift<\/span> + P<\/span>)to open the command menu.<\/li>\n
        2. Type \u201ccoverage\u201d<\/strong> to access the Coverage tab.<\/li>\n
          \"Accessing<\/figure>\n
        3. Click on the reload button in the Coverage tab.<\/li>\n
          \"Reload<\/figure>\n
        4. The tab will track all files and generate a coverage list, including a usage visualization graph for each file.<\/li>\n
        5. Click on a row to display the unused code in the Sources tab.<\/li>\n
          \"Displaying<\/figure>\n<\/ol>\n

          6. Mobile Device Emulation<\/h2>\n

          It goes without saying that all websites should be tested against their mobile layout. However, the vast array of smartphone sizes and resolutions makes it impractical for developers to test their web applications on every possible device.<\/p>\n

          Chrome DevTools offers the ability to emulate a wide range of mobile devices, including iPhones, iPads, Samsung Galaxy phones, and more. For even greater flexibility, you can choose a variable resolution from the device dropdown menu, rather than being restricted to fixed screen sizes.<\/p>\n

          To use the device emulator, simply open Chrome DevTools and click on the mobile icon on the left side. From there, a variety of devices can be selected from the \u201cdevice dropdown menu\u201d<\/strong>, enabling comprehensive testing of your website\u2019s mobile compatibility.<\/p>\n

          \"Mobile<\/figure>\n

          7. Re-running HTTP Requests<\/h2>\n

          The \u201cNetwork\u201d<\/strong> tab in Chrome DevTools provides insight into the network requests made by a site. By clicking on any of these requests, you can view more details such as request headers and responses.<\/p>\n

          This feature is especially helpful for replicating and debugging requests. You can copy these requests and re-execute them in different environments.<\/p>\n

          To copy a request, right-click on it to open the context menu, and then hover over the \u201cCopy\u201d<\/strong> option. This action will display various choices for copying.<\/p>\n

          \"Copying<\/figure>\n

          8. Managing Client-Side Storage<\/h2>\n

          Websites commonly store client-specific data in your browser, each within its own isolated storage scope, invisible to other sites.<\/p>\n

          To access this client-side storage:<\/p>\n

            \n
          1. Open Chrome DevTools.<\/li>\n
          2. Go to the \u201cApplication\u201d<\/strong> tab.<\/li>\n
          3. Look in the \u201cLocal Storage\u201d<\/strong> section.<\/li>\n
          4. Here, you\u2019ll find URLs of websites that have stored data in your browser.<\/li>\n<\/ol>\n
            \"Client-side<\/figure>\n

            Clicking on one of these URLs reveals key-value pairs \u2013 the actual data these websites save for future use. You can easily modify this data by double-clicking on the key or value sections.<\/p>\n

            Alternatively, you can add a new key and value by scrolling all the way down in the key column, right-clicking, and then selecting \u201cAdd new\u201d<\/strong>.<\/p>\n

            \"Adding<\/figure>\n

            9. Enable Local File Overrides<\/h2>\n

            Modifying a live production website carries risks, as errors can potentially bring down the entire site., and there\u2019s actually there\u2019s a safer way to test new ideas without altering the production code<\/p>\n

            This feature in Chrome DevTools allows you to use your locally modified files instead of the server-sourced ones. To activate local file overrides:<\/p>\n

              \n
            1. Navigate to the \u201cSources\u201d<\/strong> tab in Chrome DevTools.<\/li>\n
            2. Click on \u201cEnable local overrides.\u201d<\/strong><\/li>\n
            3. Create a directory where Chrome can save all your overrides.<\/li>\n
              \"Enabling<\/figure>\n
            4. Go to the \u201cNetwork\u201d<\/strong> tab.<\/li>\n
            5. Choose a file you wish to override and select the \u201cSave for override\u201d<\/strong> option.<\/li>\n
            6. The chosen file will then appear in the \u2018Overrides\u2019<\/strong> tab within \u2018Sources\u2019<\/strong>.<\/li>\n
            7. Here, you can edit the file as needed.<\/li>\n<\/ol>\n

              When you reload the page, Chrome will use your locally modified version, bypassing the server\u2019s files and allowing for risk-free experimentation.<\/p>\n

              Conclusion<\/h2>\n

              And there you have it! We\u2019ve explored some of the most useful Chrome DevTools features, particularly beneficial for web developers in coding. If you\u2019re interested in discovering more about DevTools, be sure to visit the official DevTools page<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"

              Google Chrome\u2019s built-in Chrome DevTools are a treasure trove for web developers. These tools enable you to modify web pages in real time, identify issues swiftly, and streamline the process of creating top-notch websites. Chrome DevTools are not just debugging tools; they\u2019re a comprehensive suite of utilities designed to inspect website code, execute scripts, track…<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[1258,511],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n9 Useful Chrome DevTools Features for Developers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Google Chrome's built-in Chrome DevTools are a treasure trove for web developers. These tools enable you to modify web pages in real time, identify issues\" \/>\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\/chrome-devtool-features\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 Useful Chrome DevTools Features for Developers\" \/>\n<meta property=\"og:description\" content=\"Google Chrome's built-in Chrome DevTools are a treasure trove for web developers. These tools enable you to modify web pages in real time, identify issues\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/\" \/>\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=\"2023-12-19T13:01:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/chrome-devtool-features\/hero.jpg\" \/>\n<meta name=\"author\" content=\"Hongkiat.com\" \/>\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=\"Hongkiat.com\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/\"},\"author\":{\"name\":\"Hongkiat.com\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7cc686597d92f9086729e4bcc1577ba3\"},\"headline\":\"9 Useful Chrome DevTools Features for Developers\",\"datePublished\":\"2023-12-19T13:01:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/\"},\"wordCount\":1174,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-devtool-features\\\/hero.jpg\",\"keywords\":[\"Chrome\",\"Web Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/\",\"name\":\"9 Useful Chrome DevTools Features for Developers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-devtool-features\\\/hero.jpg\",\"datePublished\":\"2023-12-19T13:01:17+00:00\",\"description\":\"Google Chrome's built-in Chrome DevTools are a treasure trove for web developers. These tools enable you to modify web pages in real time, identify issues\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-devtool-features\\\/hero.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-devtool-features\\\/hero.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-devtool-features\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"9 Useful Chrome DevTools Features for Developers\"}]},{\"@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\\\/7cc686597d92f9086729e4bcc1577ba3\",\"name\":\"Hongkiat.com\",\"description\":\"This post is published by an HKDC (hongkiat.com) staff. (I.e., intern, staff writer, or editor).\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"9 Useful Chrome DevTools Features for Developers - Hongkiat","description":"Google Chrome's built-in Chrome DevTools are a treasure trove for web developers. These tools enable you to modify web pages in real time, identify issues","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\/chrome-devtool-features\/","og_locale":"en_US","og_type":"article","og_title":"9 Useful Chrome DevTools Features for Developers","og_description":"Google Chrome's built-in Chrome DevTools are a treasure trove for web developers. These tools enable you to modify web pages in real time, identify issues","og_url":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2023-12-19T13:01:17+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/chrome-devtool-features\/hero.jpg","type":"","width":"","height":""}],"author":"Hongkiat.com","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Hongkiat.com","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/"},"author":{"name":"Hongkiat.com","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7cc686597d92f9086729e4bcc1577ba3"},"headline":"9 Useful Chrome DevTools Features for Developers","datePublished":"2023-12-19T13:01:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/"},"wordCount":1174,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/chrome-devtool-features\/hero.jpg","keywords":["Chrome","Web Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/","url":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/","name":"9 Useful Chrome DevTools Features for Developers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/chrome-devtool-features\/hero.jpg","datePublished":"2023-12-19T13:01:17+00:00","description":"Google Chrome's built-in Chrome DevTools are a treasure trove for web developers. These tools enable you to modify web pages in real time, identify issues","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/chrome-devtool-features\/hero.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/chrome-devtool-features\/hero.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-devtool-features\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"9 Useful Chrome DevTools Features for Developers"}]},{"@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\/7cc686597d92f9086729e4bcc1577ba3","name":"Hongkiat.com","description":"This post is published by an HKDC (hongkiat.com) staff. (I.e., intern, staff writer, or editor).","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/com\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-iou","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/70710","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=70710"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/70710\/revisions"}],"predecessor-version":[{"id":70712,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/70710\/revisions\/70712"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=70710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=70710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=70710"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=70710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}