Common web debugging tools

Some debuggers are definitely going to help cut down the development time as they support precisely detect a problem. The debuggers range from Network Sniffing, CSS Errors, Javascript Errors and network resources consumption.

HCI Data Source: markdown, Import:, Section:




  • Proxy Settings
    • Set the browser Proxy to
    • Remove proxy on localhost,
  • Firefox
    • Tools > Options > Advanced > Network > Connection: Settings > Manual Proxy | No Proxy for: Clear.
  • PHP
    • fopen
    • file_get_contents
  • Javascripts
    • Ajax
    • JSON Data
  • NodeJS - Using environment variables
  • Fiddler HTTPS Decryption

    • Tools > Fiddler Options > HTTPS: Capture HTTPS Connects, Decrypt HTTPS Traffic, Actions > Trust Root Certificates
    • Restart
  • PHP Example
$api_url = 'http://localhost/?context=api';

$options = array(
    'http' => array(
        'proxy' => 'tcp://',
        'header' => array(
            "Proxy-Authorization: Basic Auth"
$context = stream_context_create($options);
$fc = file_get_contents($api_url, true, $context);
echo $fc;

The PHP Code above is an extreme example of how to write debugging friendly source code. Here, the PHP Server is connecting to the another API Server in the background. But we are forcing the use of Proxy so that network sniffer tool like Fiddler can easily detect what is happening in the server side too.

Time spent in network/resource can hint a lot about why particular webpage is too slow.