There are numerous tools out there in the market and picking the right tool to help you troubleshoot an issue or understand the underlying workings is very important. We would like to share few tools which benefited us while we were troubleshooting issues.
Inspect element is a tool embedded in your browser to check the underlying code of a particular web page , you just have to right click on the browser and you can find “inspect” you click on that you’ll be able to find the HTML, CSS and styles . you can edit the elements in the Document Object Model (DOM) and change the CSS styles etc.
There are different tools for debugging for different browsers.
Firefox : Firefox Developer Tool
Chrome : Chrome Developer Tool
Safari : Safari Web Inspector
Internet Explorer : Microsoft Edge F12 Dev Tools
Opera : Opera Developer Tools
CSS debugger : Pesticide is a simple stylesheet to debug your CSS layouts. It is also available as Chrome extension. It places an outline on every element can help you figure out what’s wrong with your layout. You can use it by inserting this “<link rel=”stylesheet” href=”css/pesticide.css”>” inside your header tag .
HttpFox : HTTPFox is a packet sniffer add-on for Firefox or Edge browsers. The HttpFox is used to analyze the HTTP traffic between browser and web server.
We will be able to monitor:
- Request and Response header.
- Query String.
- Post Data.
Open any page in Firefox browser. Start the HttpFox (In Mac OS open the view tab on the top and click on the HttpFox) Press start and the data starts showing up as soon as you visit a web URL. Various tabs can be seen such as headers, cookies, query string, post data, content. These are basically related to that web page you are browsing . It is very useful to understand the network hops, query parameters that gets passed around and also to review the redirects with each requests.
Header : These allow client and server to pass additional information back and forth within a request and response . Request header tab show the information about the resources that is fetched from the server and the Response header show additional information about responses like location and responses that needs to be sent to the client.
Cookies : A cookie is basically a text file stored by the web served on the users machine. The cookies are accessible only to the server which creates it. The cookie tab contains received cookies that are sent by the server to the browser.
Query String : Query string are the parameters(key/value pairs) that can be reviewed within the query string window. These key value pairs are often passed by the webpage to external servers.
Post Data : In post data tab we can see the data being posted for eg: the data posted from the contact form we can check whether all the data are being posted or not .
Content : The content tab in the HttpFox contains the html contents of the web page you are monitoring . This can be further analyzed by using the Inspect element which is much better suited to analyze the layout and content within a web page.
There are many more tools that are available in the market and we just scratched the surface. Feel free to review the other available tools and let us know what works best for you.
At Intentwise, we provide SAAS software that helps with AMS Reporting, AMS Analytics, and AMS recommendations based on our machine learning based recommendation engine. The Intentwise AMS analytics and reporting tool will help maximize your PPC returns while optimizing spend. If you are interested in trying out the tool that supports Amazon’s AMS automation do sign up for a Trial.
Front-end Browser Debugging was originally published in Intentwise — Marketing platform powered by Machine Learning and AI on Medium, where people are continuing the conversation by highlighting and responding to this story.