Firefox extension. Perhaps because the Web Developer Toolbar is too powerful, many useful functions may be accidentally ignored by users during use. Let’s make a small summary of these forgotten skills here to fill the world with love: Images／View Image Information
Through this option, you can display the attributes of all image elements in the current web page in a new tab page: path, size, size, etc., which is particularly convenient.
Information／View Color Information
The color matching of web pages is a huge knowledge. Many people like to use Colorzilla to view the color information of web pages. This extension can display the color information of the current pointer position in the status bar, including the color of the picture. Compared with Web Developer Toolbar, this function is a bit weak, but you can still call up all the colors called by CSS in the current web page with one click, which is very helpful for studying web page color matching.
Information/Display Element Information
In the past, when I wanted to view the div attribute of a certain element or area on a web page, I always right-clicked to call out the source file, and then started using the search function to search line by line. With this function, you don’t have to worry about it anymore. When you want to view certain attributes in the web page, such as class/id, location, etc., just gently use the shortcut keys Ctrl+Shift+F and click on that area to view everything you want to know.
Forms/Show Passwords
Many people like to display their passwords clearly for many reasons. This feature of the Web Developer Toolbar provides a possibility for Firefox users with this quirk. After clicking this option, it will be clearly displayed in the password input box.
Miscellaneous/Small Screen Rendering
More and more users can use their mobile phones and PDAs to browse the Internet. Using this function allows you to preview how your web pages will look on these portable devices. Based on the preview, you can optimize the layout and frame of your web pages. , making it easier for them to browse on PDA.
Miscellaneous／Visited Links
In some cases, we will want all hyperlinks on the current web page to be invalid, so as to facilitate inspection and debugging of our web pages. Under this option, users can select Mark All Links Unvisited, and all hyperlinks will be temporarily disabled.
Tools/View Speed Report
The options in the Tools menu are basically related to various verifications of the website, CSS, JS, HTML, etc. There is also a very useful function here, which is to test the loading speed of the website online. The data from Web Page Analyzer is called here. After clicking the option, Web Developer Toolbar will submit the current website to Web Page Analyzer for testing. Users can understand which files affect the loading speed of their website based on the data list provided by Web Page Analyzer. .
Miscellaneous／Edit HTML
Perhaps the most frequently used function in Web Developer Toolbar is Edit CSS. Users can modify the CSS of the current web page in real time and see the effect of the modification immediately. Users can also use the Web Developer Toolbar to modify HTML files. This function is hidden under Miscellaneous.