The detailed instructions here are written for Google Chrome Developer Tools, that you can access within the Google Chrome browser. When debugging what’s happening, it’s important to keep Developer Tools open before you load the page. If you have not used Developer Tools before, check out the Chrome DevTools Overview. Similar debugging can be done using the developer tools of other modern web browsers.
You can use the Network panel to track all requests made to different domains. You can obtain the request headers, response, and the time taken to execute the request. All requests relevant to LiftIgniter are under the petametrics.com domain. To see only these requests, enter "petametrics" (without quotes) in the search bar at the top of the Network panel. To keep your life manageable, type this in before you begin loading the page.
There are two subdomains to which requests are made:
There are a few options that are of particular importance when debugging:
- Selecting the "Preserve log" option allows you to preserve information about requests as you navigate between pages. Note that although the request headers and latency information is preserved, the response data is not preserved when you navigate to another page. This should not adversely affect your debugging.
The Application panel has two sections relevant to LiftIgniter: the "Local Storage" and the "Cookies" sections. The "Local Storage" section is used by us to store some information, including URLs seen and clicked, in hashed form. It is also used to back up some events that need to be sent across different pageviews. It does not work in private browsing mode on Safari but it does work fine in Firefox and Chrome.
If your site is a mixed HTTP-HTTPS website, then cookies are shared correctly between HTTP and HTTPS, but the local storages are maintained separately.
All our cookies (with the exception of cookies used to help improve the Cross-site recommendation experience for customers who opt in to it) are stored as first-party cookies under your domain and are accessible under your domain in the Cookies section. LiftIgniter’s cookies are the ones that start with "_ig".
The Elements panel allows you to see the fully rendered HTML of your page. You can also edit the HTML and CSS and use this to test simple changes to your website. You can right-click on any element in your webpage and click "Inspect Element" to navigate to the HTML of that element in the Elements panel.
The Elements panel is useful for checking whether you successfully rendered LiftIgniter’s recommendations on your webpage.
Chrome’s Developer Tools has an Emulator that allows you to emulate different device types and allows you to throttle network speeds to emulate poorer connectivity. This is particularly helpful if you render your site differently on mobile devices and tablets.
It is important to keep in mind that the Emulator does not actually emulate different operating systems. It only adjusts the screen size for rendering and the user agent that is communicated to websites. Therefore, rendering details that are specific to some operating systems or devices will not be captured by the Emulator. To test for these, you may need to use a cross-browser testing tool.