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: https://github.com/bimalpoudel/tools/raw/master/tools/debugging.md, Section:

Debugging

Videos

Notes

  • Proxy Settings
    • Set the browser Proxy to 127.0.0.1:8888
    • Remove proxy on localhost, 127.0.0.1
  • 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
SET HTTPS_PROXY=http://127.0.0.1:8888 
SET HTTP_PROXY=http://127.0.0.1:8888
SET NODE_TLS_REJECT_UNAUTHORIZED=0
  • Fiddler HTTPS Decryption

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

$options = array(
    'http' => array(
        'proxy' => 'tcp://127.0.0.1:8888',
        '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.