Cover image for Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Author Deepak Mittal , Chandan Luthra
Release Date: 2010/04/01
ISBN: 9781847194961
Topic:
0%
17
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Arm yourself to destroy UI and JavaScript bugs

  • Expand your toolkit by learning to use Firebug to help you monitor, debug, develop and edit web pages on the fly

  • Create your own Firebug extensions and learn about popular third-party extensions

  • Covers JavaScript, AJAX, and CSS development

  • Covers all of Firebug's features

  • Clear explanations with easy-to-follow examples of HTML and JavaScript

    • In Detail

    With the advent of RIA (Rich Internet Applications), most web pages are driven by a combination of JavaScript, AJAX, CSS, and so on. Web developers and designers find it hard to debug and fix the issues that crop up on the client side. Firebug is a wonderful toolkit to have in your arsenal for handling all such issues. This book covers all of Firebug's features and will help you utilize its capabilities with maximum efficiency. AJAX development and debugging is not one of the easiest tasks; this book explains step-by-step, how to develop and debug AJAX components in your web page in a very easy way, thereby increasing your productivity. Topics like performance tuning of the web page are covered in detail.

    This book discusses how to become more efficient in various aspects of web development by using Firebug. It is a very easy-to-understand, step-by-step guide that explains all the features of Firebug with concise and simple examples. With this book in hand, you will be able to deal with the painful areas of web development like JavaScript and AJAX debugging using Firebug.

    The book takes you from the basics of Web Development like editing HTML and CSS on the fly to advanced features like AJAX, JSON, Monitoring, and Performance Tuning of web pages. It assumes that you have some very basic knowledge of HTML and JavaScript. For those of you with a sound knowledge of these technologies, this book can help you increase your productivity by using Firebug effectively, taking full advantage of its rich and powerful features and the console API. Towards the end, the book explains how to create your own powerful extensions for the Firebug community.

    This practical guide will equip you with the skills to edit, debug, and monitor web pages using Firebug

    Book Description

    Arm yourself to destroy UI and JavaScript bugs

  • Expand your toolkit by learning to use Firebug to help you monitor, debug, develop and edit web pages on the fly

  • Create your own Firebug extensions and learn about popular third-party extensions

  • Covers JavaScript, AJAX, and CSS development

  • Covers all of Firebug's features

  • Clear explanations with easy-to-follow examples of HTML and JavaScript

    • In Detail

    With the advent of RIA (Rich Internet Applications), most web pages are driven by a combination of JavaScript, AJAX, CSS, and so on. Web developers and designers find it hard to debug and fix the issues that crop up on the client side. Firebug is a wonderful toolkit to have in your arsenal for handling all such issues. This book covers all of Firebug's features and will help you utilize its capabilities with maximum efficiency. AJAX development and debugging is not one of the easiest tasks; this book explains step-by-step, how to develop and debug AJAX components in your web page in a very easy way, thereby increasing your productivity. Topics like performance tuning of the web page are covered in detail.

    This book discusses how to become more efficient in various aspects of web development by using Firebug. It is a very easy-to-understand, step-by-step guide that explains all the features of Firebug with concise and simple examples. With this book in hand, you will be able to deal with the painful areas of web development like JavaScript and AJAX debugging using Firebug.

    The book takes you from the basics of Web Development like editing HTML and CSS on the fly to advanced features like AJAX, JSON, Monitoring, and Performance Tuning of web pages. It assumes that you have some very basic knowledge of HTML and JavaScript. For those of you with a sound knowledge of these technologies, this book can help you increase your productivity by using Firebug effectively, taking full advantage of its rich and powerful features and the console API. Towards the end, the book explains how to create your own powerful extensions for the Firebug community.

    This practical guide will equip you with the skills to edit, debug, and monitor web pages using Firebug

    Table of Contents

    1. Firebug 1.5: Editing, Debugging, and Monitoring Web Pages
    2. Credits
    3. About the Authors
    4. About the Reviewers
    5. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code for the book
        2. Errata
        3. Piracy
        4. Questions
    6. 1. Getting Started with Firebug
      1. What is Firebug?
      2. The history of Firebug
      3. The need for Firebug
      4. Firebug capabilities
      5. Installing Firebug on different browsers
        1. Installing Firebug on Firefox
        2. Installing Firebug on non-Firefox browsers
      6. Opening and closing Firebug
      7. Firebug modes
        1. Dock view
        2. Window mode
      8. Summary
    7. 2. Firebug Window Overview
      1. Console tab
        1. Command line JavaScript
        2. Errors and warnings
          1. Status bar error indicator
          2. Errors can be descriptive and informative
          3. Executing JavaScript commands
      2. HTML tab
        1. The hierarchy of DOM nodes (the HTML source panel)
          1. Options for HTML source panel
        2. Editing HTML on the fly
          1. Editing an existing attribute of HTML element
          2. Editing an HTML element
        3. Logging events
      3. CSS tab
        1. CSS inspector
        2. List of CSS files
        3. Modifying CSS
      4. Script tab
      5. DOM tab
      6. Net tab
      7. Summary
    8. 3. Inspecting and Editing HTML
      1. Viewing source live
      2. Seeing changes highlighted
      3. Modifying the source on the fly
        1. How to modify the value of an HTML attribute
        2. How to add a new attribute to an existing HTML element
        3. How to delete an HTML element
        4. How to modify the source for an HTML element
      4. Inspecting page components, editing, and reloading
      5. Searching within an HTML document
      6. Finding an HTML element on the page
      7. Copying HTML source for an HTML element
      8. Setting breakpoints on HTML element
      9. Summary
    9. 4. CSS Development
      1. Inspecting cascading rules
      2. Preview colors and images
      3. Tweaking CSS on the fly
      4. Enabling and disabling specific CSS rules
      5. Inspecting our stylesheet
      6. Modifying CSS from Firebug's UI
      7. Inspecting and tweaking the box model
      8. Searching under the CSS tab
      9. Summary
    10. 5. JavaScript Development
      1. The command line API
        1. $(id)
        2. $ $$(selector)
        3. $x(xpath)
        4. dir(object)
        5. dirxml(node)
        6. clear()
        7. inspect(object[, tabName])
        8. keys(object)
        9. values(object)
        10. debug(fn) and undebug(fn)
        11. monitor(functionName) and unmonitor(functionName)
        12. monitorEvents(object[, types])
        13. unmonitorEvents(object[, types])
        14. profile([title]) and profileEnd()
          1. Columns and description of the profiler
      2. The console API
        1. console.log(object[, object, ...])
        2. console.debug(object[, object, ...])
        3. console.info(object[, object, ...])
        4. console.warn(object[, object, ...])
        5. console.error(object[, object, ...])
        6. console.assert(expression[, object, ...])
        7. console.dir(object)
        8. console.dirxml(node)
        9. console.trace()
        10. console.group(object[, object, ...])
        11. console.groupCollapsed(object[, object, ...])
        12. console.groupEnd()
        13. console.time(name)
        14. console.timeEnd(name)
        15. console.profile([title])
        16. console.profileEnd()
        17. console.count([title])
      3. JavaScript debugging
        1. Steps to debug JavaScript code with Firebug
        2. Conditional breakpoints
      4. Summary
    11. 6. Knowing Your DOM
      1. Inspecting DOM
        1. Filtering properties, functions, and constants
      2. Modifying DOM on the fly
        1. Auto-complete
        2. Losing the starting element
      3. Adding/removing the DOM elements' attributes
        1. Removing attributes
        2. Adding attributes
      4. JavaScript code navigation
      5. Summary
    12. 7. Performance Tuning Our Web Application
      1. Network monitoring
        1. Description of information in the Net panel
        2. Load-time bar color significance
          1. Browser queue wait time
      2. Breaking down various requests by type
      3. Examining HTTP headers
      4. Analyzing the browser cache
      5. XMLHttpRequest monitoring
      6. How to find out the download speed for a resource
      7. Firebug extensions for analyzing performance
      8. Summary
    13. 8. AJAX Development
      1. Tracking XmlHttpRequest
        1. Request/response headers and parameters
        2. GET/POST request
      2. Viewing live modifications on DOM
      3. Debugging AJAX calls using properties of a console object
        1. console.debug(object[, object, ...])
        2. console.assert(expression[, object, ...])
        3. console.dir(object)
      4. Summary
    14. 9. Tips and Tricks for Firebug
      1. Magical cd()
      2. The hierarchical console
      3. Configuring Firebug to our taste
      4. Summary
    15. 10. Necessary Firebug Extensions
      1. YSlow
      2. Firecookie
      3. Pixel Perfect
        1. Pixel Perfect options menu
      4. Firefinder
      5. FireQuery
      6. CodeBurner
      7. SenSEO
      8. Page Speed
      9. Summary
    16. 11. Extending Firebug
      1. Setting up an extension development environment
        1. Setting up the development profile
        2. Development preferences
      2. Getting started with a small "Hello World!" extension of Firebug
        1. The chrome.manifest file
        2. The install.rdf file
        3. The helloWorldOverlay.xul file
        4. The helloWorld.js file
        5. Packaging and installation
      3. Taking "Hello World!" to the next level
        1. The "prefs.js" file
        2. The "helloWorld.js" file revisited
      4. Summary
    17. A. A Quick Overview of Firebug's Features and Options
      1. Keyboard and mouse shortcuts reference
        1. Global shortcuts
        2. HTML tab shortcuts
        3. HTML editor shortcuts
        4. HTML inspect mode shortcuts
        5. Script tab shortcuts
        6. DOM tab shortcuts
        7. DOM and watch editor shortcuts
        8. CSS tab shortcuts
        9. CSS editor tab shortcuts
        10. Layout tab shortcuts
        11. Layout editor shortcuts
        12. Command line (small) shortcuts
        13. Command line (large) shortcuts
      2. Console API reference
      3. Command line API reference
      4. Firebug online resources
      5. Features expected in future releases of Firebug
        1. Firebug 1.6
          1. Some improvements in this version
            1. Scrolling panel tab bar
            2. FBTest support for Firebug extensions
            3. Locales as extensions
            4. Extension points for panel buttons and main menu options
            5. Breakpoint column for the HTML panel
            6. Break on next CSS change and CSS breakpoints
            7. Options for the break on next feature (mainly a UI-related issue)
            8. Net panel improvements
            9. Script panel improvements
            10. JavaScript function support
        2. Firebug 1.7
          1. Separate modules and panels
            1. Issue: File names versus folder names
          2. Components replaced by SharedObjects
            1. Issue: SharedObject API
          3. Recode TabWatcher/DOMWindowWatcher
          4. Sandboxed extension loading
          5. Memory panel
    3.17.162.26