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.

Firefox Developer Tools helps with debugging, editing, monitoring CSS, HTML, DOM and JavaScript. The core tools of Firefox Developer Tools are Javascript debugger, page inspector, web console.

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

Javascript Debugger : All the modern web browser have built-in javascript debugger. If your browser supports debugging, you can use console.log() to display JavaScript values in the debugger window, The debugger keyword stops the execution of JavaScript, and calls (if available) the debugging function.

You can check your JavaScript code for bugs by running it through a program that checks it to make sure it is valid and that it follows the official syntax rules of the language. These programs are called validating parsers or just validators and often come with commercial HTML and JavaScript editors.

One of such validator for JavaScript is JavaScript Lint .

Simple ways to debug javascript is to use alert() and document.write() methods in your code.

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 .

You can use CSS lint just like javascript lint and other css validator services.

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.
  • Cookies.
  • Query String.
  • Post Data.
  • Content

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.