Install and use firebugs

Install and use firebugs

Install and use firebugs:

Firebug is now one of the most useful and necessary tools for web developers. Firebug is actually a Firefox add-on or extension. It can be installed with one click in Firefox. Don't know what to do with a firebug before-

When you view a web page with Firefox, when Firebug opens (if Firefox has Firebug installed), the page's HTML, CSS, JavaScript (JQuery) etc. will be presented to you separately.

You can edit, delete and rewrite all HTML, CSS, JQuery etc. while sitting in Firefox and see the effect immediately. When you reload the page, everything will be back to normal.

What Ajax does inside can be seen by opening the Console tab of Firebug. Even if there is an error, it will show. This is the biggest advantage of Firebug.

Before, I had to reload the page by repeatedly writing the code in the CSS or JQuery file to see what the effect was, if I didn't agree, I would change the code again. Now you can write those codes in Firebug and you don't have to reload the page. If you like the preview here, just copy this code and put it in the file.

Firebugs (Net tab) will show you what causes the page to be delayed. Such as image compression, caching, etc. will bring up all the problems and give suggestions on what should be done.

If you take a firebug on that part of the code for any part of the page will show separately.

Ajax debugging:

How to install

Open Firefox and click Ctrl + Shift + A or Add-Ons from the Firefox Tools menu to bring up the Add-ons Manager.

From here, click on the Extensions tab on the left. Now it will show all the extensions installed in your Firefox. If Firebug is not installed, then go to the search box with "Search all ad-ons" at the top right and type "Firebug" and enter Firebug first. Now just click on the "Install" button and the diameter will be installed within minutes.

Once you've installed Firefox, you'll see an option called "Inspect Element with Forebug" in the context menu. Click here to open the firebug.

There is usually a firebug at the bottom and you can open a separate window or work on the right if you want.

Firebug is currently running the latest version (Firebug 2.0.11) which is compatible with Firefox 39. I will give examples and pictures using this version pair.

Look at the picture. Now the HTML tab is open. In the picture, I have opened Firebug on the homepage of our site. Look a little to the right, showing the CSS below the Style tab. Clicking on each tab will show the name of that tab.

Editing HTML code with Firebug:

Right-click on the page and press "Inspect Element with Firebug" or F12 to open the firebug. By default the "HTML" tab is open and if not click on the HTML tab.

Now you can see the HTML code in the whole page here. If you want to edit any code block here, right click on the code block and go to "Edit HTML ..." option.

Then by clicking here the whole code block will go into edit mode and you can make any change in the code from here. No matter what you change, you will immediately see its effect on the page. You can change elements, content or anything. Reloading the page will return all the code to its previous state.

Clicking on + (plus sign) will open the codeblock and then show - (minus sign) right there. In this way, by clicking on plus or minus, you will see the code expand and collapse one line at a time.

Below the "Edit HTML ..." option, selecting "Delete Element" here will delete the selected codeblock.

At the top of the context menu is "Copy HTML", with this option you can copy any selected code block and paste it in the editor or anywhere else. In this way you can check each option and see which one works. I just discussed the important ones.

View the code for a specific part of the page:

There are two ways to view any part of the code.

First - there's a mouse cursor at the top left of Firebug. Clicking on it will move the code down to where you move the mouse on the page.

Second - Right click on any part of the page with the mouse "Inspect Element with Firebug" that part of the code comes, it has already been shown.

CSS Edit, Delete with Firebug:

As soon as you open Firebug, you open the HTML codeblock in the HTML tab with a large part at the bottom. No matter which line you select from the HTML panel, the CSS written for it will show up in the Style panel or tab on the right.

Edit mode will come when you click on the value of the property you want to change. Now take a look at Outlook directly on the page with the desired value.

You can see all the possible values ​​using Up, Down arrow from the keyboard. All you have to do is hold down the arrow keys and the firebug will automatically retrieve all the values ​​one by one.

If you want to add new properties under this selector, double-clicking on any empty space inside the second bracket will bring up the field for writing new properties.

Added new CSS rule:

You can add new rules to CSS from this Style tab, so right click on the "Add Rule ..." option and you will have the opportunity to write a new rule. Now you can write any rule with the selector as you wish.

You can do this by going to the "CSS" tab next to the "HTML" tab without going to the Style tab.

Seeing the status of hover, active etc. of any element

You can see what happens when you hover a mouse over any element with Firebug, what code is there for any element when it is active, what code is there when you focus, etc. To do this, right-click on the element and give "Inspect Element with Firebug" and click on the small down arrow that appears in the "Style" tab as shown in the image on the right. There you will see Sido classes showing down. : hover,: active,: focus.

Suppose we hover over the "Search" button on the search button at the top right of our site to see what the code is, then load our site into a browser, right-click on the "Search" button, open Firebug and like the image below from the "Style" tab: Select hover, it will show below what code has been written for hover. Thus, by selecting: focus and: active, you can see the code written for focusing on the button and what it will look like if it is active.

Hover position of the button

In Firebug, select the button and select: hover

How to test JavaScript (or JQuery):

Go to the Console tab on the left side of the HTML tab and type JavaScript or JQuery code on the right side like the image below and click on Run.

The jQuery must be added to the page before it can work. If not, there is a Firefox add-on called "Firequery". If you install it, "jQuerify" will show a tab (Console, HTML tabs in the row below it), you can click on it and add it to the Instant JQuery page.

In the image above, "Run", "Clear" (clicking on this tab will clear all the code, you can type new code again), "Copy", etc. Click on the arrow sign to the right of the line you are looking at, the command editor changes and moves down from the right. Go to the name of the command line. JavaScript code can be debugged here. What is the value of a variable, it will show the suggestion as soon as you type it here and if you enter it, it will show up with its value.

You can set a breakpoint on any line by going to the "Script" tab and extracting any scripts (which are added to this page).

Clicking on the red arrow will show a list of all the scripts. Select the file you want to debug from there.

Then with a mouse click on any line, a maroon colored round ball will be set, this is what you set the breakpoint for this line. The code will stop executing so far. For example, I have set a break point on line 6. Now run the work for which you have written this script on the page, you will see that the execution has stopped up to 6 lines like the picture above.

Now why not move the mouse over any of the lines above it, the value of a variable will show all the firebugs what happened to which line. For example, I have moved the mouse over the wchbd (this) of line 8 so that the value of the selector is shown in the popup.

Click on that round ball again to lift the break point (which now shows a small yellow arrow). If you don't pick up the break point at the end of the work, you get in trouble and stop there again and again.

If you want to run the code from this line, there is a small green arrow on the right along the row marked with red arrow. Clicking there will execute the rest of the code. Or pressing F8 will work.

For Ajax debugging, leaving the "Console" tab open and loading the page will show you all the Ajax requests and any errors. This is the most powerful feature of Firebug.
Jonny Richards

Templateify is a site where you find unique and professional blogger templates, Improve your blog now for free.

Previous Post Next Post