@@ -69,7 +69,7 @@ corners. The [guibutton]#Minimize# button minimizes the debug window in the | |||
corner of the browser window, and the [guibutton]#Close# button closes it. | |||
If you use the Firebug plugin for Firefox or the Developer Tools console in | |||
Chrome, the log messages will also be printed to the Firebug console. In such a | |||
Chrome, the log messages will also be printed to the inspector console. In such a | |||
case, you may want to enable client-side debugging without showing the Debug | |||
Window with " ?debug=quiet" in the URL. In the quiet debug mode, log messages | |||
will only be printed to the console of the browser debugger. | |||
@@ -141,9 +141,8 @@ The [guibutton]#Select a component in the page to inspect it# button lets you | |||
select a component in the UI by clicking it and display its client-side | |||
properties. | |||
To view the HTML structure and CSS styles in more detail, you can use Firebug in | |||
Firefox, or the Developer Tools in Chrome, as described in | |||
<<dummy/../../../framework/installing/installing-other#installing.other.firefox,"Firefox and Firebug">>. Firefox also has a built-in feature for inspecting HTML and CSS. | |||
To view the HTML structure and CSS styles in more detail, you can use Inspector in | |||
Firefox or the Developer Tools in Chrome. | |||
[[advanced.debug.hierarchy.analyze]] |
@@ -16,5 +16,3 @@ include::installing-eclipse.adoc[leveloffset=+2] | |||
include::installing-netbeans.asciidoc[leveloffset=+2] | |||
include::installing-idea.asciidoc[leveloffset=+2] | |||
include::installing-other.adoc[leveloffset=+2] |
@@ -1,38 +0,0 @@ | |||
--- | |||
title: Installing Other Tools | |||
order: 200 | |||
layout: page | |||
--- | |||
= Installing Other Tools | |||
We recommend using a browser with either integrated or external development tools. | |||
At least Mozilla Firefox and Google Chrome have an integrated web inspector, which supports inspecting the DOM structure of a web page, as well as CSS styles and debug JavaScript execution. | |||
[[installing.other.firefox]] | |||
== Firefox and Firebug | |||
While Firefox has an integrated web inspector, the Firebug inspector has some additional features. | |||
[[installing.other.firefox.firebug]] | |||
=== Using Firebug with Vaadin | |||
After installing Firefox, use it to open | |||
link:http://www.getfirebug.com/[http://www.getfirebug.com/]. Follow the | |||
instructions on the site to install the latest stable version of Firebug | |||
available for the browser. You may need to allow Firefox to install the plugin | |||
by clicking the yellow warning bar at the top of the browser window. | |||
After Firebug is installed, it can be enabled at any time from the Firefox | |||
toolbar. <<figure.firebug.calc>> shows Firebug in action. | |||
[[figure.firebug.calc]] | |||
.Firebug debugger for Firefox | |||
image::img/firebug.png[width=100%, scaledwidth=100%] | |||
The most important feature in Firebug is inspecting HTML elements. Right-click | |||
on an element and select [guilabel]#Inspect Element with Firebug# to inspect it. | |||
In addition to HTML tree, it also shows the CSS rules matching the element, | |||
which you can use for building themes. You can even edit the CSS styles live, to | |||
experiment with styling. |
@@ -17,7 +17,6 @@ In this example, we use the following toolchain: | |||
* link:http://www.eclipse.org/downloads/[Eclipse IDE for Java EE Developers] | |||
* link:http://tomcat.apache.org/[Apache Tomcat 8.0 (Core)] | |||
* link:http://www.getfirefox.com/[Mozilla Firefox] browser | |||
* link:http://www.getfirebug.com/[Firebug] debug tool (optional) | |||
* link:http://vaadin.com/download/[Vaadin Framework] | |||
The above reference toolchain is a good choice of tools, but you can use almost |