Firebug
From MapbenderWiki
Contents |
Links
Console
Contains command line javascript, shows javascript error message log, can enter JavaSript commands after the >>> at the bottom
console.log()
- deutsch
Der Befehl console.log() kann in Javascript-Code dazu benutzt werden, um Messages in der Firebug-Console auszugeben
console.log("Irgendeine ausgegebene String-Variable = %s",Variablenname);
console.log('width: %d height: %d', width, height);
Auflistung aller möglichen String Substitution Patterns:
%s String %d, %i Integer (numeric formatting is not yet supported) %f Floating point number (numeric formatting is not yet supported) %o Object hyperlink
More information about console.log unter http://getfirebug.com/wiki/index.php/Console_Panel
AJAX Requests untersuchen
- deutsch
Firebug loggt in der Console und im Tab Net die Ajax-POST und GET-Requests. Um sich Informationen zum jeweiligen Request anzuschauen, muss man den Unterordner des Requests über + oder durch Klicken des kompletten Request-Links öffnen. Im Fall eines GET-Requests öffnen sich 3 Tabs, im Fall eines POST-Requests folgende 4 Tabs:
* Params: Displays the name/value pairs of the request URL * Headers: Displays requestion and response headers * Response: Shows the actual data received from the server as it was received. * Post: Displays the data sent to the server from a POST request (tab only shows for POST requests, not GET requests).
HTML
Shows HTML as an indented hierachy of DOM nodes, which you can open and close to see or hide child nodes.
- deutsch
Über die Firebug Inspect/Untersuchen-Funktion können einzelne HTML-Elemente gezielt ausgewählt und untersucht werden, da im HTML-Tab das entsprechende Element farblich hervorgehoben wird. Durch Anklicken einzelner Attribute des Elementes können diese live im Client zum Testen verändert werden, ein Doppelklick auf das Start-Tag des HTML-Elementes (z.B. <div) öffnet das komplette Element im Editiermodus. Das Gleiche gilt auch für CSS-Attribute, die hier auf der rechten Seite angezeigt werden; auch diese können live verändert und getestet werden.
CSS
CSS inspector, view all loaded style sheets, modify styles on the fly. See list of styles sheets and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of "Edit".
Script
Shows the javascript files and the calling document. See list of included JavaScript files and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of "Inspect". Set breakpoints and conditions underwhich break points appear.
DOM
Shows all the page objects and properties of the window. As variables are properties of the window object, Firebug displays all JavaScript variables and their values.
Net
Shows all the downloads, how long each resource took to download, the HTTP request headers and server response sent for each resource. The XHR tab is useful for AJAX debugging.
- deutsch
Hier kann übersichtlich beobachtet werden, welche Anfragen an den Server gehen und was als Antwort zurückkommt. Requests, die fehlschlagen, weil es keine Antwort vom Server gibt (z.B. ein Button-Image, das nicht gefunden werden kann), werden in rot dargestellt.
FirePHP
FirePHP allows you to take a deeper look at all the work your PHP code does to generate that page you are currently looking at in your Firefox browser.
Just install the FirePHP Firefox extension, PHP PEAR package and add a few lines of code to your PHP application to get started. You will see a "FirePHP" tab in your Firebug extension to bring your PHP backend logic to your fingertips!
In mapbender/core/system.php you can enable FirePHP (default is off)
# FirePHP error log re-routing
define("LOG_PHP_WITH_FIREPHP", "off"); // "on" or "off"
