The browser is a developer's most powerful tool. 99% of people don't use their browsers 100%. Here are 30 browser extensions that will greatly improve your development efficiency if you make full use of them reasonably.
1. WhatFont
"WhatFont", is a tool to help users quickly identify font information in web pages.
When you are browsing the web, if you see a font you like but don't know what it is, it is very convenient to use WhatFont at this time. After installing the plug-in, when browsing the web, just move the mouse to the font you are interested in, and WhatFont will immediately display the detailed information of the font, including font name, size, color and so on.
In addition, WhatFont can also identify the deformation and shadow effects of fonts, and supports searching fonts on Google Fonts and Typekit, which is convenient for users to choose fonts when designing web pages.
In general, WhatFont is a very practical tool that can help users identify font information in web pages, which is convenient for users to use in their own design work.
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
2.WhatRuns
The Google plugin is called "WhatRuns", and it is a tool to help users quickly understand which technologies, frameworks and libraries a website uses. Using the plugin, a user simply visits a website and clicks on the icon for the "WhatRuns" plugin to get a list of technologies used by that website, including:
Server information: Web server, host, IP address, DNS records, etc.
Programming language: The programming language used by this website (for example, Java, PHP, Python, Ruby, etc.)
Front-end framework: the front-end framework used by the website, such as React, Vue.js, etc.
CMS: If the website uses a content management system, the WhatRuns plugin can also help users identify it
JavaScript library: JavaScript library used by this website (eg jQuery, AngularJS, etc.)
Fonts: The font name and font source used by this website
In addition, the WhatRuns plugin also provides a code viewer for viewing the source code of the website, and can also view the http header and page screenshots of the page.
In short, WhatRuns is a powerful and easy-to-use tool that can help web developers quickly understand the technology stack of the website, and can also help others better understand the technology of the website during the learning process.
https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip?hl=en
3. Web Developer
"Web Developer", which is a powerful tool that provides developers and webmasters with various web page development and design tools to improve their work efficiency. Using this plug-in, users can quickly check various properties of the page when browsing the webpage, such as HTML, CSS and JavaScript codes, etc., and provide a series of debugging tools to help users diagnose and repair webpage problems.
Here are some of the features offered by this plugin:
Inspect and edit page elements: You can view the HTML and CSS of the page, and easily edit and adjust page elements through the visual interface.
Change the page style: You can easily change the CSS properties of the page to view the page in different styles.
Reset CSS: A page's CSS can be easily reset with the click of a button to help you better understand how it's styled.
Debugging JavaScript: Provides a set of debugging tools, such as debugger, breakpoint, console, JavaScript error window, etc., to help you diagnose and fix JavaScript errors.
Check website performance: Provides a set of performance analysis tools to help you check your website's performance indicators such as speed, loading time, etc.
Display image information: You can view detailed information of all images on the page, including size, format, resolution, etc.
Check page responsiveness: You can check how your pages will look at different resolutions to make sure your site responds appropriately to all users.
In short, Web Developer is a powerful, easy-to-use tool that can help developers and webmasters complete various tasks more efficiently and accurately in the process of web page design and development, and can help them diagnose and repair web pages. issues to improve the quality and performance of the site.
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
4. Daily.dev
This Google plugin is called "Daily.dev - News for Busy Developers", which provides a platform for aggregating technology blogs and news to help busy developers keep abreast of the latest technology developments and trends.
The main function of this plugin is to provide a convenient portal for users to easily get the latest technical articles from various blogs and news sites. These articles are recommended and screened by the community, ensuring their quality and readability.
The plugin supports a variety of topics, including front-end development, back-end development, data science, artificial intelligence, cloud computing, and more. Users can choose the topics they are interested in according to their interests and needs to obtain related articles and news.
In addition to this, the plugin also provides some additional features, such as displaying the latest articles and news in Chrome's new tab page, saving and sharing interesting articles, and more. These features increase user productivity while making it easier for users to keep up with the latest technology trends.
https://chrome.google.com/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied
5. JSONView
"JSONView", which is a tool for viewing and analyzing JSON data in a browser.
Usually, when we are developing or testing a web application, we need to view the JSON data returned by the web request in order to understand the operation of the application and analyze the data. However, the JSON data display methods provided by browsers by default are usually not friendly enough and difficult to view and analyze intuitively.
JSONView is designed to solve this problem. This plugin will automatically detect the JSON data returned by the browser and format it into an easy-to-read format, such as hierarchical indentation, color differentiation, etc. This makes it easier for users to view and understand JSON data.
In addition, JSONView also supports saving JSON data locally, and provides some other useful functions, such as copying JSON data to the clipboard, expanding or collapsing JSON data, and so on. These features increase user productivity and make it easier for users to analyze and process JSON data.
In short, JSONView is a very practical tool that can greatly improve the efficiency of developers in analyzing and processing JSON data in the browser.
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en
6. Window Resizer
This Google plugin, called Window Resizer, is mainly used to resize browser windows during the development and design process to better test and preview web pages and applications at different resolutions. It easily adjusts browser window size and resolution, enabling developers and designers to quickly test how a website will look and function on a variety of different resolutions and devices.
This plugin supports custom browser window size and resolution, allowing users to add their own custom dimensions. Users have the option to choose from several preset sizes, such as various desktop and mobile sizes, as well as full-screen and custom sizes.
The plugin is very easy to use and easily accessible in the toolbar. Users can open the plugin by clicking on the plugin icon, select the desired size, and click Apply to instantly change the window size. Window Resizer also has shortcut keys and options that can be configured as desired.
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en
7. JSONLite
json-lite is a Chrome extension for browsing JSON data. It provides an intuitive user interface that enables users to easily view and analyze JSON data. The extension supports parsing JSON data into a tree structure, while also providing syntax highlighting and formatting options. Additionally, it supports copying JSON data to the clipboard for further processing. Users can use this extension by opening the json file directly in the Chrome browser or by accessing the JSON data in a web application. In short, json-lite is a very practical tool that can help users better understand and process JSON data.
8. Responsive Viewer
Responsive Viewer, which helps developers and designers preview the responsive design of a website in a browser to check how the website will look and layout on different devices and resolutions.
The plugin provides a simple toolbar with options for common mobile and desktop resolutions such as iPhone, iPad, Android, MacBook Pro, and more. The user can select a device among these options and render the website in the browser to see how it will look and behave on the selected device. Additionally, users can customize resolution and screen orientation and save them as custom options for later use.
Using Responsive Viewer can help developers and designers quickly test the responsive layout and design of websites on different devices and resolutions, and it can save time and effort.
https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en
9. BrowserStack
This Chrome plugin is provided by BrowserStack, a cloud-based cross-browser testing platform. The plugin allows users to access BrowserStack's testing tools directly in the Chrome browser without leaving the browser or opening other applications. This plugin helps website and application developers to quickly test the compatibility of their products on various browsers and devices.
Specifically, this plugin allows users to easily simulate a variety of different browser and device environments, including various desktop browsers (such as Chrome, Firefox, Safari, and IE) as well as mobile devices and tablets. Users can run tests on BrowserStack's cloud platform with just one click in the Chrome browser, ensuring that their products work properly on various devices and browsers.
Additionally, the plugin features live debugging, allowing developers to quickly find and fix issues during testing. It also supports local testing and provides automated testing capabilities. All in all, this plugin can help developers test and debug their products faster and ensure that the products work well on various browsers and devices.
https://chrome.google.com/webstore/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb?hl=en
10. Awesome Screenshot
Awesome Screenshot and Screen Recorder is a tool that allows users to take screenshots, record videos and markup on the Chrome browser. This plugin can be used to create presentations, tutorials, and documentation that users can share with teams, clients, and other stakeholders.
With this plug-in, users can capture the entire screen, visible windows, selected areas or selected elements on a web page, and use brushes, text boxes, arrows, shapes and other tools to mark, annotate and edit them. In addition, the plug-in also provides a screen recording function, users can record the entire screen, a selected area or a single window, and edit and export it.
With Awesome Screenshot, users can save screenshots and recorded videos to local hard drives or cloud storage services (such as Google Drive, Dropbox, Box, etc.), and can also share them to social media or emails. In addition, the plugin supports adding watermarks and texts on screenshots and recorded videos.
Awesome Screenshot is a powerful browser add-on for personal and business users that can improve work efficiency and team collaboration.
https://chrome.google.com/webstore/detail/awesome-screenshot-and-sc/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en
11. Visbug
Visbug is an open source design tool plug-in for Google Chrome, mainly for web designers and front-end developers, designed to make it easier for designers to edit and debug web design in the browser.
Visbug supports editing and designing web pages in any state by clicking, dragging, resizing, etc., as freely as on an art board. With Visbug, users can check details such as style, spacing, distance, accessibility, and alignment, and fine-tune layout and content at any device size. Users can leverage their skills in design software like Adobe/Sketch, design in clutter and utilize actual production environments or prototypes as artboards and design opportunities.
Visbug also supports simulating factors such as latency, internationalization, media queries, platform limitations, CPU, screen size, etc., allowing users to better make decisions on the front end (such as accessibility, responsiveness, edge cases, etc.). Users can directly edit the design of the terminal state and execute/test their own ideas without waiting for developers.
The goal of Visbug is to bring more control to designers and content creators. By bringing the interaction and shortcut keys of design tools into the browser, designers can use their creativity and imagination more freely, thereby Improve the efficiency and quality of web design and development.
https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en
12. Motion DevTools
Motion DevTools is a Google Chrome extension for inspecting, editing and exporting animations made with CSS and Motion One.
With Motion DevTools, users can click the record button and interact with the page, detected CSS and Motion One animations will be drawn on the classic timeline interface. Users can use the playback controls to browse and replay the animation, starting from any point in time.
On the editing side, users can add, move, and delete keyframes, edit values and easing with custom controls, and reflect them on the page in real time.
In terms of export, users can optimize the animation through Motion DevTools, and click the export button to generate code immediately. Users can export any animation as CSS transition, CSS animation or Motion One.
Overall, Motion DevTools provides users with a convenient tool to help them inspect, edit and export animation effects in the browser. It provides an intuitive interface and powerful editing functions, making the creation and modification of animation effects easier and more efficient.
https://chrome.google.com/webstore/detail/motion-devtools/mnbliiaiiflhmnndmoidhddombbmgcdk?hl=en
13. Contrast
Kontrast is a Google Chrome extension designed to quickly check and adjust text and background contrast to comply with Web Content Accessibility Guidelines (WCAG).
Kontrast provides the following features:
✔ Automatically check the contrast of selected elements
✔ Show accessibility ratio
✔ Automatically get the closest WCAG compliant color
✔ Color slider
✔ RGB and HSL modes
✔ Color picker
✔ Easily reproduce colors (HEX, RGBA, HSLA)
✔ Ignore CSS hover effects
✔ Dark Mode
The use of Kontrast can help users quickly check and adjust the text and background contrast in the page to meet WCAG requirements and improve the accessibility of the website. By automatically checking contrast and displaying accessibility ratios, users can quickly determine whether page elements meet WCAG requirements and make adjustments if needed. In addition, Kontrast also provides a wealth of color tools to help users easily select and edit colors.
https://chrome.google.com/webstore/detail/kontrast-wcag-contrast-ch/haphaaenepedkjngghandlmhfillnhjk?hl=en
14. PerfectPixel
PerfectPixel is a Google plugin that helps developers and markup designers overlay semi-transparent images on top of HTML for pixel-perfect comparisons when developing HTML.
Function:
multi-layer support
Layer inversion and scaling
Individual layers for each site
Layers are saved between browsing sessions
Simple and easy-to-use user interface
Support drag and drop file upload, paste from URL, paste from clipboard
Support for keyboard arrow keys and mouse wheel
Extensions can be used under the file:// protocol (local files)
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh
15. Site Pallete
Site Palette is a free Google Chrome extension that pulls colors from any website and is a must-have tool for designers and front-end developers. It has the following functions:
Free Site Palette API available
Supports several palette generators
Create shareable links
Provides preview palette images for download
Download the automatically generated Sketch template
Add Adobe palette support
Use color palettes on coolors.co
Fine-tune the palette in the Google Art Palette
Add print styles: print or save color palettes as PDF
With Site Palette, you can easily extract the colors used in any website and generate a complete color palette. It can also generate shareable links so you can share palettes with your team or clients. Site Palette supports several palette generators and supports Adobe Swatch. You can also fine-tune your palette at coolors.co and the Google art palette.
https://chrome.google.com/webstore/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh
16. Pesticide
Pesticide for Chrome is a Google plugin that injects Pesticide CSS into the current page to better view the layout of various elements on the page.
With this plugin, you can quickly check the position and size of various elements on the page for better design and development. It can help you locate elements more efficiently when debugging and troubleshooting, and gain a better understanding of the structure and layout of web pages. It can also be used for accessibility testing of websites to ensure that the size and position of individual elements meet the appropriate standards and requirements.
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi?hl=zh-CN
17. Responsive Design Tester
This Chrome extension is called "Responsive Tester", and its main function is to help developers test the responsive layout of web pages under different screen sizes.
Plugin Features:
Simulate different device sizes, including mobile phones, tablets, and desktops;
Support custom device resolution and orientation;
Test on multiple device sizes at the same time to quickly check the responsiveness of the page;
Provide operation methods such as shortcut keys and mouse dragging, which is convenient for developers to quickly switch screen sizes;
Supports vertical and horizontal layout viewing.
This plugin is very helpful for developers to test while working on responsive design. By previewing the webpage in different sizes, developers can ensure that the layout of the webpage can be well displayed and used on various devices, improving the accessibility and user experience of the website.
https://chrome.google.com/webstore/detail/mobileresponsive-web-desi/elmekokodcohlommfikpmojheggnbelo
18. ColorZilla
ColorZilla is a Google Chrome add-on that provides a variety of features to make work easier for web developers and designers. Here are the main features of ColorZilla:
Eyedropper Tool - Gets the color of any pixel on a webpage.
Advanced Color Picker - Photoshop-like feature to get and adjust any color.
CSS Gradient Generator - Can generate CSS gradient code.
Web Color Analyzer - Get the color palette of any website.
Palette Viewer - 7 pre-installed palettes can be previewed.
Color History - Keeps track of recently picked colors.
Element Information Display - Display information such as tag name, class, ID, size, etc.
Automatically copy the selected color to the clipboard.
Keyboard shortcuts are supported.
Gets the color of the dynamically hovered element.
Click to start choosing a color (Windows only).
Get the color from the Flash object.
Colors can be picked at any zoom level.
ColorZilla requires access to data on all websites for basic color picking. But it does not collect any data or browsing activities of users, and pays great attention to user privacy. If users encounter problems or find bugs, they can directly contact the plug-in official for help.
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
19. Lorem Ipsum Generator
This is a Google Chrome add-on called "Lorem Ipsum Generator", which can quickly generate default text or Lorem Ipsum text. The default settings optimize the plug-in experience, but users can also customize the settings to get more suitable text. Each sentence is randomly generated to mimic real text.
Options for this plugin include:
Generate 1-5 paragraphs with 1-20 sentences per paragraph
Optionally wrap paragraph tags or other line breaks
copy text to clipboard
The plugin only needs storage permissions in order to save the user's preferences. If you need to get placeholder text or Lorem Ipsum text quickly, this plugin will be a great choice.
20. Code Beautifier
This is a Google Chrome extension to beautify CSS, JavaScript and JSON code. It automatically (optionally) beautifies the source code when you open a .css, .js or .json file.
Features of the plugin include:
Support CSS(Less/Scss/Sass) / JavaScript(JSON/JSX/TypeScript) formatting
Support for unpacking or deobfuscating JavaScript
Supports more than 60 syntax highlighting themes
Use JSBeautifier (https://jsbeautifier.org/) and CodeMirror (https://codemirror.net/).
With this plugin, you can browse the source code in a more beautiful and readable way when opening CSS, JavaScript or JSON files.
21. Imageye
"Imageye Image Downloader" is a full-featured Google Chrome add-on that helps users easily download images on the web. It's easy to use, has many customization options, and can provide previews to ensure users download the images they want.
how to use:
A user can open a web page and click on the add-on's icon to open the add-on. The plugin will display all the images in the webpage and the user can select them by clicking on the images to download. Users can choose to download a single image or a set of images. Once the user has selected the images to download, they can click the "Download" button to save them to their computer.
The plugin also allows users to specify the desired image format (such as JPG or PNG) and can set filters to only display images of a certain size or file type. Additionally, users have the option to preview images before downloading to ensure they are downloading the correct image.
https://chrome.google.com/webstore/detail/imageye-image-downloader/agionbommeaifngbhincahgmoflcikhm
22. Stylebot
"Stylebot" is a powerful Google Chrome add-on that helps users easily modify the style of websites. It's easy to use, has a visual editor and a CSS editor, and is suitable for users of all skill levels. Users can fully customize the look and feel of the site through the plugin to suit their personal preferences and needs.
how to use:
A user can open a web page and click on a plugin icon to open the plugin's panel. The plugin's panel provides a visual editor that enables users to modify styles directly on the web page. Users can use the mouse to select elements to modify and use options in the editor to change styles. For example, users can change text color, font, size, background color, margins, borders, etc. Users can preview their changes by clicking the "Apply" button, and can use the "Undo" button to undo the changes.
The plugin also provides a CSS editor, enabling experienced users to manually edit CSS codes to modify styles. The editor includes some syntax highlighting and auto-completion features to help users write correct code.
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha
23. Colorpick
"ColorPick Eyedropper" is a very useful Google Chrome add-on that helps users pick a color from a web page and get its code. It's easy to use, with a customizable interface and advanced features for users of all skill levels. Users can easily get the desired color codes from web pages through this plugin to use in their design projects.
how to use:
Users can click on a plugin icon to open the plugin's panel. Users can choose any color on the web page using the plugin's color picker tool. The plugin automatically displays the hex code of the selected color in the panel, and users can also convert it to RGB, HSL and other formats. Also, the plugin provides some other features like history, shortcuts, zooming, etc.
Users can also use the plugin's advanced features to customize its appearance and behavior. For example, users can change the shape, size, and color of the color picker, and can choose how to display color codes. In addition, the plugin supports multiple languages, and users can choose their favorite language.
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
24. React Dev tool
"React Developer Tools" is a very useful Google Chrome add-on that provides powerful debugging and profiling tools that can help developers better understand and debug React components. It is easy to use with a customizable interface and advanced features for developers of React applications. Users can easily analyze and debug React components through this plugin to improve the quality and performance of the application.
how to use:
When the user visits the React application, the plugin is automatically detected and activated, and the user can click the plugin icon to open the plugin's panel. The panel displays the React component tree where the user can view the component hierarchy and properties. Users can also view the status and context of components by selecting them, and use other features of the plugin, such as search, filter and diagnostic tools, to further analyze and debug components.
In addition, the plugin also supports React Native applications, and users can use the plugin to debug React Native components on mobile devices.
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
25. Wappalyzer
"Wappalyzer Technology Profiler" is a very useful Google Chrome add-on that helps users understand the technologies and tools used by any website. It is easy to use with an intuitive user interface and highly customizable features. This plug-in can help developers, security researchers, competitive intelligence analysts, etc., understand the technical architecture of the website, so as to conduct better analysis and research. Users can easily understand the technology and tools of the website through the plug-in, so as to better understand the features and functions of the website.
how to use:
Users can visit any website in the Chrome browser and click on the add-on's icon to see the technologies and tools used by that website. The plugin recognizes various types of technologies and tools, including web servers, CMSs, JavaScript frameworks, web analytics tools, and more. Users can click on any item on the plug-in panel to view detailed information about the item, such as version number, author, license, and so on.
In addition, the plugin provides some additional features, such as users can export the identified techniques and tools into CSV files for further analysis and processing. Users can also select techniques and tools to ignore and adjust other options of the plugin through the plugin's settings panel.
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg
26. Fake Filler
"Fake Filler" is a useful Google Chrome add-on that helps users automatically generate fake profiles for filling online forms and registration pages. This plugin is easy to use and can automatically save user's custom templates for later use. Users can easily fill out forms through the plugin without manual entry, saving a lot of time and effort. This plugin is especially suitable for users who need to fill out a lot of forms or registration pages, such as webmasters, social media marketers, etc.
how to use:
When users need to fill out an online form or registration page, they can click on the plugin icon to automatically generate a fake profile. This information includes names, addresses, phone numbers, email addresses, and more. The plugin can autofill forms and automatically save custom templates created by users for later use. Users can choose different templates to fill out different forms or registration pages.
In addition, the plugin also provides some other functions, such as users can customize the filling options, such as country, state, province, city, etc. Users can also view recently filled forms and custom templates and delete unwanted entries through the plugin panel.
https://chrome.google.com/webstore/detail/fake-filler/bnjjngeaknajbdcgpfkgnonkmififhfo
27. Live editor for CSS & LESS
"Live editor for CSS & LESS" is a very useful Google Chrome plugin, which provides a real-time CSS and LESS editor, enabling users to make style changes on web pages in real time. This plugin is easy to use and supports a variety of features, enabling users to edit code more easily. Users can easily edit the web page style through this plug-in, making front-end development more convenient. This plugin is especially suitable for users who need to edit web page styles frequently, such as front-end developers, website designers, etc.
how to use:
When users browse the web, they can click on the plug-in icon to open the live editor. In the editor, users can edit CSS and LESS codes and see the style changes on the webpage in real time. The plugin supports features such as syntax highlighting, code folding, auto-indentation, and auto-completion, enabling users to edit code more easily.
In addition, the plugin also provides some other features, for example, users can place the editor in the sidebar to browse the webpage and edit styles at the same time. Users can also open and close editors, clear editors, copy styles, etc. through the plugin panel.
https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol
28. Web Editor
"Web Editor" is a convenient and easy-to-use Google Chrome plug-in, which provides an online code editor, enabling users to easily write, edit and run HTML, CSS and JavaScript codes in the browser. The plugin supports a variety of features that enable users to write code more easily. Users can easily write and edit web page code through this plug-in, making front-end development more convenient. This plugin is especially suitable for users who need to write and test code quickly, such as front-end developers, website designers, etc.
how to use:
When the user clicks on the plugin icon, a new browser window will open containing a code editor. In the editor, users can edit HTML, CSS, and JavaScript codes, and preview the changed pages at any time. In addition, the plugin also provides some other features, such as syntax highlighting, auto-completion, auto-indentation, code folding, etc.
Users can learn about the function of various elements in the editor by hovering the mouse over different parts of the editor. For example, users can use the left pane of the editor to browse files and folders, the right pane of the editor to preview pages, and the bottom pane to display console and log information.
https://chrome.google.com/webstore/detail/web-editor/pdmlhckofhkhebmcplblcijijgjiakcm
29. CSS Viewer
This is a Google Chrome add-on called CSSViewer, which helps developers easily view the CSS styles of any web element. If you are a front-end developer, CSSViewer is a very useful plugin that makes it easier to view and understand the CSS styles of any web page. If you are a front-end developer, CSSViewer is a very useful plugin that makes it easier to view and understand the CSS styles of any web page.
how to use
Using this plugin is very easy. When you browse on a web page, you only need to click on the plug-in icon, and then move the mouse over the element you want to view, and you can see the CSS style of this element on the screen. This plugin also allows you to copy CSS styles and paste them into your code editor, allowing you to quickly copy the styles of any element.
In addition, CSSViewer also provides some other functions, such as quickly viewing the CSS style of the element by right-clicking the element, and viewing the change of the element in real time by modifying the style. It can help you quickly understand the style of your web pages and speed up the development process.
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce
30. Font Ninja
This is a Google Chrome add-on called Fonts Ninja, which helps developers and designers easily find and identify fonts used on web pages. In short, if you are a designer or developer and need to use various fonts in web design and development, Fonts Ninja is a very practical plug-in that allows you to find and use the fonts you need more quickly and easily font.
how to use
Using this plugin is very easy. When you browse the web, you only need to click the plug-in icon, and then move the mouse to the text you want to view, and you can see the detailed information of the font on the screen, including font name, font weight, font size, font spacing, row height, etc. This plugin also allows you to copy the CSS code of the entire font with one click and paste it into your code editor, so you can quickly apply font styles to your design and development projects.
In addition, Fonts Ninja also provides some other functions, such as creating custom font libraries and finding other fonts on the website that are similar to the fonts used by the current webpage. It helps you discover and use great-looking fonts more easily, improving your design efficiency and accuracy.
https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh
Finish
With the rapid development of the Internet today, the Google browser plug-in has become an essential tool to improve productivity and user experience. This article introduces a variety of Google Chrome plug-ins, including image download, web page editing, font recognition, etc., which can help us complete web page design and development more quickly and efficiently. With the continuous update and innovation of technology, it is believed that more practical Google browser plug-ins will appear in the future, bringing more convenience to our work and life.
So far, all the Google plug-ins have been introduced, and I hope it will be helpful to your development work. If you like my sharing, don’t forget to like and repost it so that more people can see it. Finally, don’t forget to pay attention to "Front-end Experts". Your support will be the biggest motivation for me to share, and I will continue to output more in the future Please look forward to the content.