Home > Resources > Web Development > Web Tips > Tools

Web Authoring Tools

In the Libraries (for CSU Libraries Staff only)

At CSU

On the Web

General Tutorials

Editors

Browser Tools

  • Internet Explorer Developer Center
    • Developer Toolbar (Internet Explorer 7)
    • F12 Developer Tools (Internet Explorer 8+ )
      • Change Browser or Document mode to IE7-9, compatibility view or quirks mode, validate HTML, CSS, feeds or links, inspect HTML or CSS, disable images or CSS, resize, color picker
  • Firefox add-ons for web developers
    • Page diagnostics
      • Web Developer - Adds a menu and a toolbar with various web developer tools.
        Disable JavaScript, CSS or images, view and edit CSS and HTML, view cookies, view element information, resize window, view generated source, and view CSS and JavaScript errors
      • Firebug - Development tools to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
      • View Formatted Source - Displays formatted and color-coded source for each element.
      • View Source Chart - Draws a color-coded chart of a Web page's source code
      • CSS Viewer - View CSS properties
      • IE Tab 2 - Simulate Web browsing through Internet Explorer
    • Page validation
    • Site information
      • FlagFox - Website physical location, safety checks, translation, validation, etc.
    • Designer utilities
      • ColorZilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other color tools.
      • MeasureIt - Draw out a ruler to get the pixel width and height of any elements
      • FireShot - Screen captures
      • Greasemonkey - Customize the way a web page displays using small bits of JavaScript.
      • Stylish - Customize the way a web page displays using user styles.
  • Google Chrome
    • Chrome Developer Tools
      • Right-click any element and click Inspect Element to see and edit its HTML and CSS.
      • Click the Network tab and refresh to see file sizes and load times of all files for the page.
      • Click the console and reload the page to debug or execute JavaScript from the command line.
    • Chrome extensions for web developers
      • Web Developer - same tools as the Firefox add-on, but without the toolbar clutter
      • Wappalyzer - quickly identify a website's software (web server, operating system, content management systems, JavaScript frameworks, analytics)
      • Check My Links
      • Page diagnostics: Web Developer Checklist, Firebug Lite, YSlow, jsError, HTML5 Outliner, IE Tab or IE Tab Multi
      • Site information: SEO for Chrome, Alexa Traffic Rank, PageRank, PageRank Status, IP Address and Domain Info
      • Designer utilities: Stylish, Screen Capture, MeasureIt, Page Ruler, ColorPicker, Window Resizer, Alt CSS
    • Other Chrome extensions I find indispensable
      • Xmarks - cross-browser bookmark synchronizer
      • LastPass - cross-browser password manager
      • AdBlock - automatically hide all ads on web pages
      • Speed Dial 2 - visual bookmarks for new page tab

Online Tools