As a front-end developer, I believe that I must have encountered the following scenarios:
- I see a good style effect of a certain module of a website and want to see the CSS code
- Adjust styles during development, such as character overflow, alignment, font size and color
- Change website data or style screenshot sharing
During the development process, we often encounter situations where we need to constantly adjust the code to achieve the desired effect. In the case of an online website, F12 is generally used simply and rudely to view the code or change the data. But today I found a really nice Chrome plugin that offers a better solution. I tried it out myself and it works great. In this article, I will share the specific functions of this plugin and see if it can solve your problem just right.
The name of this plugin is: VisBug
VisBug is a browser extension for web development by Adam Argyle, available in Google Chrome and Firefox browsers. The main purpose of VisBug is to provide web developers a more intuitive, easy-to-use and fun way to develop and design websites. VisBug is similar to the browser's developer tools, but provides more visual tools to edit CSS styles, HTML elements and layout live on the page, as well as inspect and improve the accessibility and performance of the page.
To put it simply, the plug-in provides a more intuitive way to edit web pages, which can be easily designed and debugged, including moving, resizing, editing text, modifying colors, implementing preview effects, etc. , which can improve the daily life of students with obsessive-compulsive disorder The efficiency of repeated adjustments.
After the installation is complete, open the corresponding website you want to debug. After clicking the plug-in, a left column will appear, containing various tool options.
The main functions of VisBug include the following function points, the order of the following instructions corresponds to the order of the screenshots of the function points above:
1. Measure the distance between elements. After selecting an element, move the mouse to display the distance between various elements and the selected element, just like checking the design drawing.
2. View the CSS style of the selected element. When hovering, it will follow the movement of the mouse. If you need to copy or stay, click on the element. The pop-up window will not disappear and you can perform the copy operation until you click the next element to close the window.
3. Display the visual related attributes of the selected elements. There are not many practical data for this feeling.
4. After selecting the element, you can press the left button or the arrow keyboard to drag
5. The margin of the display element can be adjusted by keyboard.
The keyboard adjustment operation method is also supported by subsequent related function points. The specific operation method can be viewed by hovering over the corresponding function points.
6. The inner margin (padding) of the display element is the same as the outer margin.
7. Adjust the style of elements based on flex layout, which is very convenient to adjust through the keyboard.
8. Adjust the font color and background color of the element, and modify the palette after selecting the element.
9. If the element has shadows, you can adjust shadow-related details.
10. Adjust the position of elements, drag and drop arbitrarily
11. Adjust font size, font spacing, line spacing
12. Edit elements (delete and add text or pictures), which is very convenient for the scene where data needs to be changed.
13. Search page elements (support selectors such as label, class, id, etc.)
The main function points have been introduced, and interested students can install and experience it. VisBug plug-ins help developers make web development and design easier and increase their creativity and productivity. If you are a web developer or designer, VisBug can be an indispensable tool for you.
After reading this article, if you find it useful, remember to give it a thumbs up to support it, and you may use it someday~
Focus on front-end development, share front-end related technology dry goods, public account: Nancheng University Front-end (ID: nanchengfe)
This article is participating in the "Golden Stone Project"