Difference between revisions of "Tools for customizing JReviews Themes"

From JReviews Documentation
Jump to: navigation, search
 
(7 intermediate revisions by one other user not shown)
Line 1: Line 1:
== Firefox Addons ==
+
If you use the Chrome browser, the best tools are the default DevTools:
  
*[http://chrispederick.com/work/web-developer/ Web Developer Toolbar] - Adds a menu and a toolbar with various web developer tools
+
[[File:chrome-devtools.png]]
  
*[http://addons.mozilla.org/en-US/firefox/addon/539 MeasureIt] - Draw out a ruler to get the pixel width and height of any elements on a webpage.
+
You can right-click on any element on the page and click '''Inspect Element'''. That will open up the Element tab of the Chrome DevTools and you will be able to inspect the html code and see all css styles that are applied to that specific element.
 
+
*[http://getfirebug.com/ Firebug] - You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Probably one of the most widely used web developer tools.
+
 
+
 
+
=== Firebug video tutorial ===
+
(watch in full screen for best view)
+
<swf width="720" height="590">Firebug</swf>
+
  
 +
Check the [https://developers.google.com/chrome-developer-tools/ Chrome DevTools Guide] for more info on how to use it.
  
  

Latest revision as of 20:18, 9 May 2020

If you use the Chrome browser, the best tools are the default DevTools:

Chrome-devtools.png

You can right-click on any element on the page and click Inspect Element. That will open up the Element tab of the Chrome DevTools and you will be able to inspect the html code and see all css styles that are applied to that specific element.

Check the Chrome DevTools Guide for more info on how to use it.