FireBug(Firefly)

Firebug (also known as: Firefly) is an extension tool under firefox, which can debug all website languages, such as Html, Css, etc., but the most attractive thing about FireBug is the javascript debugging function, which is very convenient to use and can be used in various browsers. It can be used in all browsers (IE, Firefox, Opera, Safari).

​

Introduction to Firebug software

Firebug's other functions are also very powerful, such as viewing and debugging HTML, CSS, DOM, overall website analysis, etc. In short, it is a complete and powerful set of WEB development tools. Then there is the fact that it is open source software.

FiFireBug (Firefly) integrates HTML viewing and editing, Javascript console, and network status monitoring. It can be said to be one of the must-have extensions for developers. Firebug analyzes the internal details of Web pages from various angles, bringing great convenience to Web developers.

FireBug (Firefly) integrates a rich set of development tools into your Firefox that are readily available while browsing the web. You can edit, debug and monitor the CSS, HTML and JavaScript of any web page in real time…

​

Firebug function introduction

activation

Firebug activation is URL-based and adheres to the same origin policy. This means that when you open a page from the same origin on a different tab, Firebug will automatically open. When you open pages from different sources in the same tab, it will automatically close. On the other hand, the activation of DevTools is based on tags. This means that when you open DevTools in a tab, they will stay open even if you switch between different websites. When you switch to another tab, however, they are closed.

Open tool

Press F12 to open Firebug. To open it to inspect elements, press Ctrl+Shift+C/Cmd+Opt+C. DevTools share the same shortcut keys, but also provides shortcut keys for different panels. For example, the network monitor can be opened with Ctrl+ Shift+ Q/ Cmd+ Opt+, the web console can be opened with Ctrl+ Shift+ K/ Cmd+ Opt+ K, and the debugger can be opened with Ctrl+ Shift+ S/ Cmd+ Opt+.

The web console is Firebug's equivalent of the console panel. It displays log information related to web pages and allows you to execute JavaScript expressions via the command line. The display is different between the two. This may change bug 1269730.

Filter log messages

Firebug provides two ways to filter log messages, through the options menu and the filter button in the toolbar. The Developer Tools Console offers similar functionality via filter buttons within its toolbar - all in one place.

Command line API

The command line API in Firebug provides some special features for your convenience. The developer tools command line have some common features, but there are also some other features that others miss.

Console API

Logging stuff to the console from within a web page Firebug provides a console API within the page. The developer tools share the same API, so your console.* statements will continue to work.

Keep a log

In Firebug, you can click the Persist button in the toolbar to persist logged messages between page navigations and reloads. In DevTools, this option is called Enable Logging and is available in the Toolbox Options panel.

Server log

Firebug extensions like FirePHP allow logging server-side messages to the Firebug console. This feature has been integrated into DevTools using the ChromeLogger protocol and does not require any extensions to be installed.

command history

The command history is available via the Firebug command line button, which can be pressed in the DevTools command line by pressing ↑/↓.

​

Firebug installation tutorial

1. Download the Firebug software package from Huajun Software Park, unzip the compressed package, and double-click with the left mouse button to open the installation file.

Note: To decompress the compressed package, you need to use a compression and decompression tool. WinRAR is recommended because the technology is mature and reliable. WinRAR download address:http://softwaredownload4.com/soft/5.htm

2. Drag the decompressed .xpi file directly into the Firefox browser interface. After a moment, we can see the Firebug icon in the upper right corner of the Firefox browser, and the installation is successful.