How to debug JavaScript in FireFox?

Firebug add-on makes debugging javascript code very easy. After installing firebug extension in firefox and opening a webpage, you can see a new menu item in the context menu of firefox.

firebug-option

Clicking the menu item will bring firebug GUI at the bottom half of the browser’s window.

firebug-gui

In the HTML tab, the html code of the current webpage is shown. In the Script tab, the javascript code contained in the current webpage is shown.

However we know that there are several ways to introduce js code into the webpage’s html. The first method is putting js code directly in the <script></script>. In this case the HTML tab will show the content of html including the js code in the <script> tag. The Script tab will also show show the content of html because it includes the js code. But you can set breakpoints at the beginning of code lines.

firebug-html-tab1firebug-script-tab1

The  second method to introduce js code is using “src” attribute to include a js file. In this case, the HTML tab shows  almost the html content while the Script tab shows the content of the included js file.

firebug-html-tab2firebug-script-tab2

The third method is using a specific php file in the “src” attribute to generate the javascript code on the fly as follows:

index.php

<?php
$html="<html>
<head><title>main</title></head>
<body>
body
<script src='loadscript.php'>
</script>

</body>
</html>";
echo $html;
?>

loadscript.php

<?php
$out="alert('sss');";
echo $out;
exit;
?>

 

In this case, the HTML tab shows the content of the html plus the js code got from the output of loadscript.php(shown in the <script> tag) and  Script tab shows the js code(the output of loadscript.php).

firebug-html-tab3

firebug-script-tab3

 

The fourth method is using a php file in the “src” attribute to simulate a js file.

loadscript.php

<?php
function get_file($path) {
  if ( function_exists('realpath') )
  $path = realpath($path);

  if ( ! $path || ! @is_file($path) )
    return '';

  return @file_get_contents($path);
}

$expires_offset = 31536000; // 1 year
header('Content-Type: application/x-javascript; charset=UTF-8');
//header('Expires: ' . gmdate( "D, d M Y H:i:s", time() + $expires_offset ) . ' GMT');
header("Cache-Control: public, max-age=$expires_offset");
$out = get_file("test.js");
echo $out;
exit;

?>

In this case, the html tab shows the html and the js code got from the output of loadscript.php and the Script tab shows the js code in the test.js.

firebug-html-tab4

firebug-script-tab4

 

From the comparison above, we know that firebug will show the js code in both the Script tab and the html tab except for the included js file which is only shown on Script tab.

If you see the script tab not showing scripts or empty, you need to clear the cache, sometime you need to refresh the webpage to let the content displayed correctly in firebug.

 

If you like my content, please consider buying me a coffee. Buy me a coffeeBuy me a coffee Thank you for your support!

Leave a Reply