Chuyển tới nội dung
Home » Chrome Web Developer Extension | Support And Feedback

Chrome Web Developer Extension | Support And Feedback

Best Google Chrome Extensions for Web Developers

Summary

This compilation showcases the best Chrome tools to ensure you’re armed with an arsenal of resources to elevate your craft.

The boundaries are quite loose and you can find tools that cater to developers and also to designers.

That is why we have decided to show them all uncategorized. We don’t want you to overlook tools you might otherwise discard but can help you in your daily work.

Do you have a beloved Chrome extension? Have a go-to addon to help web development and design? Share them below if you do!

Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!

Với tốc độ ưu việt và nhiều developer tool built-in, Chrome dần phổ biến hơn trong giới designer và developer bên cạnh Firefox. Và cũng chính vì lý do này, số lượng tiện ích Chrome đang gia tăng ngày càng chóng mặt.

Cách sử dụng

4.1 Một số tùy chọn

Ở một số chức năng như disable, css, forms, images chúng ta chỉ việc click vào các chức năng con và xem thay đổi trên giao diện trang web. ví dụ Trang 24h như sau

Thì sau khi ta xóa hết style đi thì trang sẽ chỉ còn là như thế này

Hoặc khi ta Display image Paths thì trang web sẽ có giao diện thế này

Khi chúng ta

Disable Inline style

thì các phần Css inline sẽ được bỏ đi và trang web sẽ như thế này

4.2 Kiểm tra toàn bộ CSS Validator

Để kiểm tra toàn bộ CSS Validator thì ta chỉ việc chọn menu

Tools

->

Validate CSS

thì chúng ta sẽ được render ra 1 trang chứa các thông tin CSS của trang chúng ta.

Kết quả trên cho ta thấy trên trang 24h.com.vn có 2 lỗi (errors) CSS và 112 cảnh báo (warnings).

Một ví dụ khác là chúng ta thử chọn menu

Tools

->

Validate Local CSS

thì sẽ thấy có 19 errors và 141 warnings

4.3 Miscellaneous

Trong menu chức năng này cung cấp đầy đủ cho chúng ta các công cụ như pick color, ruler, xóa cache, xóa lịch sử duyệt web…

  • Ruler
    Chọn

    Miscellaneous

    ->

    Display Ruler

    sẽ có một hình chữ nhật để đo các thành phần trên màn hình theo đơn vị pixcel

4.4 Cookies

Với menu này cung cấp cho developer đầy đủ các chức năng thêm, sửa xóa cookies. Rất hữu ích trong các trường hợp muốn test các chức năng của website liên quan đến cookies.

  • Ví dụ add cookies ta chọn

    Cookies

    ->

    Add Cookie...
  • Xem tất cả các cookies trên trang hiện tại ta chọn

    Cookies

    ->

    View Cookie Infomation

Và còn rất nhiều chức năng khác để bạn khám phá công dụng của extension này. Các bạn hãy add thêm vào trình duyệt của mình để hỗ trợ thêm cho công việc debug nhé!

Best Google Chrome Extensions for Web Developers
Best Google Chrome Extensions for Web Developers

Best Chrome Extensions for Web Developers

Here’s our list of essential Chrome extensions for web developers, handpicked to enhance your coding productivity and streamline your development workflow.

Marker.io

The Marker.io Chrome extension allows you to report bugs from the Chrome browser directly into your PM tool, without leaving your website or web app.

Visual annotations in your browser window

Before Marker.io, whenever we did QA, we would:

  1. Screenshot the issue;
  2. Annotate the screenshot;
  3. Open up Linear;
  4. Finally create a ticket and attach all relevant information.

Now? As soon as we spot a bug, we just open up the extension, and in one click, send the bug report straight to Linear (our favorite PM tool).

Check it out:

No more alt-tabbing, transferring emails from Gmail to Linear, or having an annotation tool on a different screen.

Data-rich bug reports

QA testing can get a little repetitive. With every report, you typically need to attach:

  • Source URL
  • Environment info
  • Screenshot
  • Screen resolutions
  • Console logs
  • Etc.

With the Marker.io plugin, all technical data is automatically captured with the bug report, and sent directly to your PM tool.

This is a big time-saver for us.

You can imagine how much time this saves during a web dev project (after all, that’s why we built it).

The cherry on top: you can also use Marker.io to get feedback from your clients. Either with the browser extension or with a Javascript snippet on the client’s site.

2-way integrations

As a project manager, you have two main concerns when it comes to communication with the client:

  • Clients and end-users need to be notified when their issues have been resolved
  • Developers should never leave their PM tool

This is only possible with Marker.io.

As soon as an issue is “Done” in, say, Jira—that same issue will also be marked as “Resolved” in Marker.io.

Check it out:

Marker.io is available on the Chrome web store and runs on Firefox, too.

Want to collect bug reports and feedback directly into your issue tracking tool? Try Marker.io free for 15 days.

Session replay

For web developers, the first step when receiving feedback is to try and replicate the reported scenario.

But even with all the technical data in the report—your development team sometimes still can’t quite grasp the issue.

If only you could see exactly what happened during testing…

Well—the Marker.io extension includes session replay for that reason.

Straight from your PM tool, simply click the “Watch replay” link.

You’ll then be able to watch a screen recording of the last 30 seconds (or more) before the report was submitted.

Check out session replay in action:

BrowserStack

BrowserStack lets you test websites from any browser and device in real-time, desktop and mobile alike.

Pro tip: Today’s browsers follow the same specs and best practices, so browser testing is not exactly our number one priority at Marker.io.

With that said, we still use the BrowserStack extension for high-fidelity mobile testing on different devices.

The reason for this is that Chrome DevTools isn’t enough: it’ll only change your screen’s resolution. It won’t emulate a real mobile browser.

If you like BrowserStack, you’ll love our BrowserStack integration. Whenever you report a bug, Marker.io captures the context of the virtual device and attaches it to your issues.

That’s a lot of time-saving!

Fake Filler

Fake Filler fills all input fields on a page with fake/dummy data, eliminating the need for developers and testers to manually enter values.

Pro tip: The most common use case for our team is when testing sign-up flows.

It can get repetitive (and slow) to fill out all fields over and over again. Now, we do it in one click with this useful Chrome extension. Plus, our test accounts look a little more real compared to random keyboard presses!

Loom

Sometimes, screenshots are not enough.

Loom is a screen recording tool that allows you to create and share a video with your team or clients in mere minutes.

Pro tip: While this may not seem like a web developer extension at first sight, we use Loom in many ways at Marker.io.

  • Visually describe bugs for internal QA
  • Quick 1-minute video to align with your team for the day
  • Walk customers through our app with mini-guides

Our favorite feature: instant upload and shareable link.

We paste the link into Slack or Intercom and move forward with the day!

LT Debug

LT Debug is designed to aid in debugging and testing websites/web apps.

This Chrome extension replaces the cumbersome debuggers, developer consoles, and other analytics tools with an all-in-one developer tool.

Pro Tip: LT Debug is our go-to productivity tool while developing or testing a website.

It has 9 productivity tools like:

  • Add/Remove/Modify HTTP(s) header requests
  • Block URL requests
  • …and many more!

We can save any simulated configuration we like, and re-use it anytime while developing the website.

This saves us lot of time—plus, the extension is free, unlike its alternatives, and does the job well!

Web Developer Checklist

Web Developer Checklist is an amazing tool for web designers and developers alike.

This helpful Chrome extension analyses your webpage for violations of best practices and helps you discover any problem areas.

Pro tip: Our main use case is making sure we haven’t overlooked any of the small, but crucial components when building a website.

  • 404 page
  • Favicon
  • Broken links
  • Sitemap
  • etc.

Those things take very little time to build, but that’s exactly our problem: they’re overshadowed by the bigger picture.

Web Developer Checklist helps us not forget about them.

Wappalyzer

Wappalyzer shows you what websites are built with: CMS, framework, JavaScript libraries, and many more—straight from your web browser.

Pro tip: Back when we were a web dev agency, clients would come to us with specific requests and requirements.

They’d show us examples of websites or features they like. We would then check those websites out with Wappalyzer and figure out how they were built so we could do something similar.

…and sometimes, we use it for fun, too. When you come across a cool website, you just want to know how it was built!

ModHeader

ModHeader allows you to change HTTP request and response headers.

Pro tip: Although we use Insomnia for API testing, ModHeader is an excellent addon for those who prefer to test straight in the browser.

The extension helps you ensure your API calls work properly. Another use case is to tweak & test responses on the fly, without having to update the code in the backend.

Requestly

The Requestly Chrome extension allows you to:

  • Modify headers
  • Redirect URLs
  • Switch hosts
  • Delay or throttle network requests
  • Insert scripts into any web page
  • Share sessions with teammates
  • Mock an API response

…and a lot more, in just a few simple clicks. It makes frontend dev as well as QA a lot faster—and more productive!

Pro tip: This is yet another toolbox for testing in browser. However, this one is open-source, too. Preferences!

WAVE

WAVE is a web accessibility evaluation tool. In other words, this extension will tell you if your page is hard to read or navigate, or incorrectly structured.

Pro tip: For us, the main use case is SEO. If your website isn’t accessible, you should expect your rankings to tank.

WAVE ensures:

  • Your images have alt tags
  • Page hierarchy makes sense
  • Font size isn’t too small or too big
  • Users with disabilities can navigate your site with ease
  • …and much more.

These may seem unimportant or obvious. But we see them as low-hanging fruits that turn into quick wins for your SEO.

If your (or your client’s) business is based in the US, the WAVE toolbar will also ensure your website is compliant with the Online Accessibility Act—to avoid fines down the road.

Lighthouse

The Lighthouse Chrome extension runs tests against your page and generates a complete performance profile.

It’s an easy way to get a quick audit of your site and find out what needs to be improved at a glance.

Pro tip: We use Lighthouse every once and a while to make make sure we follow best practices for our Webflow website.

The tool helps us keep an eye on what we do well and not so well: performance, accessibility, and mobile responsiveness.

Added benefit: the extension will give you basic SEO recommendations as well.

JSONView

JSONView formats JSON into a readable format, straight in the browser.

Pro tip: Obviously, JSON in plain text is unusable. With the extension:

  • Numbers, booleans, and strings have different colors
  • Arrays and objects can be collapsed/expanded
  • All links are clickable

This is an amazing productivity extension for any developer who needs to interact with a JSON API.

Clear Session

Clear Session does exactly what you’d expect: clears cookies, session, and local storage from the website you’re currently on in one click.

Pro tip: The main use case at Marker.io is flow testing.

Let’s imagine we want to test an admin user inviting a new member. And then, what that invite flow looks like for the new user.

While we used to just open tabs for each different session, we now simply click Clear Session to instantly log out and make a clean switch between the two accounts.

It’s also perfect to test edge cases without messing with our pre-existing testing profiles.

Another alternative is Clear Cache. It essentially does the same thing… but the icon isn’t as catchy!

And if you just want to edit your cookies, there’s also EditThisCookie.

VisBug

VisBug turns any web page into an interactive artboard, allowing you to play with and edit elements to your liking.

Pro tip: The VisBug extension is useful in many ways for web developers.

  • Brainstorm new UI & frontend design ideas
  • Create pixel perfect mockups on the fly
  • Edit text, replace, or adapt images without having to go through DevTool

Grepper

Grepper is a database of queries & answers for developers.

Pro tip: The Grepper extension helps developers find code snippets straight into the Google search results page.

While we see how useful this might be in some cases (forgettable snippets, quick answers, learning, etc.), we’re not big fans.

When we Google for answers, we like to look at the context around that code to see if it makes sense for us to use.

With that said, we still use Grepper as a quality of life tool, as the extension allows you to copy any code snippet into your clipboard in one click.

uBlock Origin

uBlock Origin is a content blocker that removes ads, malicious URLs, and tracking scripts from your browsing sessions.

Pro tip: This extension is by far one of our favorites.

As developers, we’re constantly scouring Google, Stack Overflow, and other sites riddled with distracting ads and popups.

uBlock Origin does an amazing job at blocking that unnecessary noise and helps us focus on the day-to-day.

Vimium

With Vimium, you can browse the web using just your keyboard.

Pro tip: We already use keyboard shortcuts all the time in our IDE.

So, the natural next step is to bring those shortcuts to our browser.

While Vimium is already pretty intuitive, all shortcuts are customizable if needed.

OctoTree

OctoTree improves your GitHub with an IDE-like code tree, bookmarks for repos & issues, and more.

Pro tip: OctoTree makes it a lot easier for us to navigate through repos.

We no longer need to click through dozens of directories or try to remember the file name.

If you like OctoTree and believe GitHub deserves a little makeover, you might also be interested in:

  • Refined GitHub (extra features and simplified UI)
  • File Icons for GitHub (give every file type a unique icon)

Dark Reader

Dark Reader toggles dark mode on for every website, even if they don’t have it available.

Pro tip: Most websites today have a bright white background for accessibility reasons.

But we spend most of our workday in front of our computers, and we like to think we can protect and extend our eyes’ lifetime a little bit.

If your IDE is already in dark mode—why shouldn’t your browser be as well?

LanguageTool

LanguageTool is a grammar and spell checker. Basically, an autocorrect that lives in your browser.

Pro tip: While this may not seem useful for pure dev work at first sight, we still use LanguageTool regularly.

The extension allows us to make sure no typo went through to our website or web app copy.

Plus, it’s not uncommon for the dev team to sometime have to write technical support articles.

LanguageTool ensures those are readable and grammatically correct!

daily.dev

daily.dev is a curated feed of developer news from 400+ sources.

Pro tip: When it comes to catching up with developer news, this extension is a massive time saver.

We no longer have to look for quality articles by ourselves. We just open up a new tab, and there it is: a complete catalog of news for the day.

The best part is that those are already curated by other users through an upvote system. Plus, they are sorted by category, so we can check out the news that is most relevant to us.

ColorZilla

ColorZilla is a great tool for any designer or front-end developer.

With a single click, you can pick any color from a webpage and get its hexadecimal code, RGB values, and more.

Pro tip: We use ColorZilla to quickly grab colors for our design projects.

Say you want to match a button color with a specific shade on a webpage. Instead of guessing the color or going through the CSS, we simply use ColorZilla to grab the exact color code in seconds.

For similar functionality, check out Eye Dropper. And if you want to generate color palettes from webpages, Site Palette is another excellent option.

Window Resizer

Window Resizer is an excellent extension for web developers to test their websites in different screen resolutions.

With just a few clicks, you can easily resize your browser window to emulate various screen sizes.

Pro tip: Most browsers nowadays allow you to resize your window somewhat easily, but this is slightly faster.

We use Window Resizer to ensure our web designs are responsive and look great on all devices.

Lorem Ipsum Generator

Lorem Ipsum Generator is your go-to extension when you need placeholder text in a snap.

With just a click, you can insert lorem ipsum text directly into your website’s text fields.

Pro tip: When designing a new webpage or feature, we don’t wait for the final copy to start our work.

Instead, we use Lorem Ipsum Generator to quickly add placeholder text and see how the design will look with content in place.

Naturally, we need to fix the design once the copy is sent over, but this allows us to quickly get started.

The thing about Chrome extensions is that none of them are must-haves.

However, when you do find that one extension that is just right for your use case… productivity goes up tenfold!

We hope these extensions are as useful to you as they are to us.

Did we forget anything? Let us know on Twitter or via e-mail and I’ll add your favorite extension to the list!

16 Best Chrome Extensions for Developers in 2023

By Lakshmi Bhadoria, Community Contributor – May 17, 2023

Extensions add extra features and functions to your browser, enhancing the work or process. For example, Grammarly is a writing assistance extension that can help you review grammar, spelling, and punctuation and suggest better-phrased sentences, making writing emails or documentation a breeze.

Similarly, with the help of these browser extensions, web developers save time and cost, as many of these highly effective tools are free. From the web page font to the technology behind it, this help builds and optimize products daily and can improve the ones already in use.

But Why Chrome Extensions?

  • The answer is simple. Since its release in 2008, the Chrome browser has seen exponential growth and adoption in its user base.
  • According to StatCounter Browser Market Share, as of April 2023, Chrome has a 66.13% worldwide browser market share. Safe to say that most users prefer using Chrome and hence one of the critical browsers to be considered during web development.
  • Chrome always had the upper hand with its Chrome web store extensions. Read more about the key differentiating and winning factors in the debate between Edge vs Chrome in 2023.

Since most developers prefer the Chrome browser, we have curated a list of Chrome extensions and best plugins for Web Developers.

  • Top 14 Chrome Extensions for Web Developers:
  • 1. Window Resizer
  • 2. BrowserStack
  • 3. ColorZilla
  • 4. WhatFont
  • 5. Check My Links
  • 6. JavaScript and CSS Code Beautifier
  • 7. Web Developer
  • 8. Session Buddy
  • 9. JSON Viewer
  • 10. Wappalyzer
  • 11. Test IE
  • 12. Lighthouse
  • 13. Ghostery

Top 14 Chrome Extensions for Web Developers:

Window Resizer

The number of people browsing the web is increasing daily through a combination of different devices, browsers, screen sizes, and resolutions. Providing a good user experience is critical to make the web pages and apps responsive and fully functional across possible device combinations.

Window Resizer resizes the browser window to mimic various screen resolutions making it very useful for web developers to test their layouts, especially while working with responsive designs.

Most standard mobile, tablet, and desktop are covered, and there are options to add custom sizes if your desired resolution is not already mentioned. This Chrome extension also has the option to export your settings and import them to another computer.

BrowserStack

BrowserStack is another handy Chrome extension for web developers that lets you test your work on every possible on-demand browser and OS.

This plugin provides real devices to test on and not emulators/simulators. It launches new test sessions on real browsers with a couple of clicks. You can also initiate up to 12 browsers for effortless access, switch between browsers, and spend less time on the overall testing process using the Chrome Extension.

It lets you test out the responsiveness of your webpage or app and check the user experience in real-time to file bugs.

To use BrowserStack integration:

  1. Install the BrowserStack Extension.
  2. Open the webpage you want to test and click on the BrowserStack logo on your extension toolbar.
  3. Select the browser & device combination you want to test on.

Note: Testers need a BrowserStack account to use the Chrome extension. Sign up for free directly from the extension. Also, BrowserStack Local lets you test local servers & HTML, CSS and JS files in real desktop and mobile browsers, across different OSes.

Add BrowserStack Chrome Extension

ColorZilla

Colorzilla is an eyedropper tool with a color picker, color history, CSS gradient analyzer, etc. It is an excellent Chrome extension for web developers or designers to directly pick up the color and use it in your design or work.

WhatFont

This extension helps you identify the font from any web page easily and effectively and enables you to get the results within seconds. Just hover over the text you want to know the font of.

It also helps identify the text’s style, size, weight, and color.

Check My Links

The extension does exactly what it says. Check My Link crawls through your web page to show if it has broken links and checks for valid and redirected links. It can be easily used and can be very helpful for maintaining the SEO standards of your webpage.

JavaScript and CSS Code Beautifier

As a web developer, you often want to check the source of any web page. How often do you see the code arranged haphazardly after ctrl + c & ctrl + v code from the source or after opening .css/.js/.json files?

This extension helps to beautify the code and arrange it in a manner that can be understood and worked upon easily.

Add JavaScript and CSS Code Beautifier Extension

Web Developer

This extension is a must-have for web developers. Web Developer plugin will add a toolbar button to the Chrome web browser. When clicked, the button shows a series of tools used on any web page.

It has CSS, Disable, Cookies, Images, Forms, Outline, Information, Miscellaneous, and Resize categories. Under each category, there are various tools to perform different actions. For example, under the ‘Images’ category, there are options to:

  • Find broken images
  • Display image dimensions
  • Display image path
  • Reload images

And many more.

Read More: 10 must-have Chrome Extensions for Testers

Session Buddy

Session Buddy is one of the most popular session managers that allows developers to manage their tabs by saving the open tabs as collections to be restored later. It can also recover the charges after a crash.

With the help of search functions, you can easily find what you are searching for in open or saved tabs.

JSON Viewer

As a developer dealing with JSON data can be difficult sometimes. JSON viewer extension beautifies and systematically structures the data to make it easy to work with it.

Some of its features include:

  • Open-source (at https://goo.gl/fmphc7)
  • Syntax highlighting
  • Option to sort json by keys
  • Option to show line numbers

Add JSON Viewer Chrome Extension

Wappalyzer

Wappalyzer is an effective tool to help find out all the underlying technologies used to build any website.

With just one click, you can discover the programming languages, CMS, databases, web services, content management, generators, server software, analytics tools, eCommerce platforms, plugins, widgets, JavaScript frameworks, etc.

Add Wappalyzer Chrome Extension

Test IE

Even if most internet users prefer Chrome or other new-age browsers, some still use Internet Explorer or Edge. The numbers are low but still there, and as a developer, we want to reach out to as many users as possible.

BrowserStack develops test IE and runs tests on real IE browsers (IE6 – IE11) and all versions of Edge within Chrome. With a click from your Chrome browser, you can start a test session for Internet Explorer.

Lighthouse

How the site looks is not as important as how it performs. Even if the site looks stunning, it cannot get more users without poor performance.

This is where this extension proves to be of great help to developers. Lighthouse is a tool that improves web pages’ performance and quality by running quick tests and audits the page to generate a report that helps identify weak spots.

Add Lighthouse Chrome Extension

Ghostery

A web developer’s most significant asset can be the speed of their system. To be effective is to be fast, but if the system fails to support you, it can be a huge loss, even if you are fast.

Ghostery is a powerful plugin that blocks any website ads and terminates the trackers activated on the site, which speeds up the performance. You can browse faster while protecting your privacy.

CSSViewer

You often stumble upon a website whose CSS properties you would want to know and use in your work. This plugin can effectively make it easy for web developers to know the underlying CSS attributes.

You can click the toolbar CSSViewer icon and then hover over those elements you want to inspect on the web page.

ClickUp

For those Devs who like productivity tools, ClickUp is a platform that makes your personal and work lives more productive, saving you time. Its Chrome Extension lets you create your ideal dashboard and get a high-level overview of your tasks with progress, checklists, and more.

React Developer Tools

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.

Add React Developer Tools Chrome Extention

So, these were our curated list of top 14 web developer Chrome extension picks. These tools can help web developers work faster and more efficiently. These extensions are handy today to increase productivity in the fast-paced, technologically advanced world. Hopefully, a few of these Chrome extensions can be added to your browser and come in handy for faster and more reliable results.

Web developer extension for Chrome

Bài đăng này đã không được cập nhật trong 2 năm

Support and feedback

Get help developing your extension, and help us make Chrome Extensions better.

Request a feature

Submit a request for a feature that you believe could improve the extension platform.

If you’re a developer or designer, you will likely already have a collection of favourite Chrome extensions you use on a daily basis. Extensions that make life easier, make you more productive or perform an essential task better than a dedicated tool. This list may build on that collection.

As the vast majority of us use Chrome, it makes sense to consider Chrome extensions. Other browsers are available but Chrome is used by 68.7% of internet users. While it isn’t big on privacy, it certainly aces productivity!

We polled our own team and asked every dev we know for their list of Chrome developer extensions they use regularly or would suggest.

What follows is a curated list of the best Chrome extensions for developers around right now.

These may not be the most popular extensions but they have been tried, tested and not found wanting by the Astra team!

Top 10 Web Development Chrome Extensions You Simply Need to Try!
Top 10 Web Development Chrome Extensions You Simply Need to Try!

Giới thiệu

Là một lập trình viên web chuyên nghiệp chắc hẳn không ai là chưa từng sử dụng bất kì một extension trên trình duyệt nào để hỗ trợ cho việc code tốt hơn. Hôm nay tôi xin giới thiệu tới các bạn một extension trên trình duyệt chrome dành riêng cho các

web developer

. đó chính là

web developer extension

. Extension này có các phiên bản trên các trình duyệt như chrome, firefox và Opera. Trong khuôn khổ bài viết này tôi chỉ dùng chrome để đưa ra các ví dụ cho các bạn.

Data Saver (Beta)

Data Saver, sẽ giảm lượng dữ liệu tiêu thụ khi duyệt web. khi kích hoạt, Chrome sẽ dùng máy chủ Google nén trang web trước khi bạn tải trang. Tuy nhiên vẫn có hạn chế: các trang SSL và ẩn danh sẽ không được hỗ trợ.

Bài viết gốc được đăng tải tại creativebloq

In this blog post, we look at the 24 best Chrome extensions for web developers based on features, rating, and use cases.

As a web developer, you’re always looking for ways to make your life easier and more productive.

Chrome extensions are one way to get there. They’re a core part of your stack of developer tools.

So, if you’re looking for a few more extensions to add to your list, we’ve got your back.

The Marker.io dev team compiled their favorite Google Chrome extensions into one neat list.

Then, we asked our friends over at /r/webdev to enhance it with their own suggestions.

What results is a high-quality, curated list of Chrome extensions for web developers.

From small CSS and HTML productivity hacks to tools our devs couldn’t live without, here are our top picks for 2024.

Build a Chrome Extension – Course for Beginners
Build a Chrome Extension – Course for Beginners

Extensions in action

Load these sample extensions on your local computer.

Action API demo

This sample demonstrates the use of the Action API which changes the icon, icon badge, hover text or popup page depending on the user’s choice or action.

UserScript API demo

A user script can be created by users or downloaded from a script repository. This sample allows you to inject files and arbitrary code added in an options page.

Scripting API demo

This sample demonstrates how you can inject JavaScript into web pages using the Scripting API.

SidePanel API demo

This sample demonstrates how to create a side panel that opens when the user clicks a button on a page or opens a context menu.

11.

Công cụ này sẽ kiểm tra web của bạn từ trên xuống dưới (tất nhiên chỉ khi web của bạn là theo chuẩn) về mọi mặt: SEO, khả năng khả dụng, khả năng truy cập, tốc độ,… Ví dụ như, nếu bạn thiếu tag H1 trên page hoặc page thiếu meta title hay meta description, công cụ sẽ thông báo bạn ngay. Nếu bạn click vào link ‘more info and help’ ở cuối tiện ích, bạn sẽ thấy checklist chi tiết hơn.

The Top 8 Chrome Extensions for Frontend Developers in 2019
The Top 8 Chrome Extensions for Frontend Developers in 2019

17.

Nếu đã là web developer, chắc hẳn bạn đã nghe qua về Stack Overflow, địa chỉ phải đến khi vấp phải bất cứ vấn đề lập trình nào. Nếu chưa nghe qua, bạn nên vào xem thử ngay đi, cộng đồng Stack Overflow đang phát triển mạnh mẽ với một loạt chủ đề đa dạng từ C#, Java đến PHP và jQuery. Tiện ích này sẽ thêm một search box trực tiếp lên trình duyệt giúp bạn tìm kiếm kho kiến thức khổng lồ của Stack Overflow mọi lúc, mọi nơi.

Cách thêm vào Chrome

Bạn có thể thêm extention này vào trình duyệt bằng cách rất đơn giản như sau

  1. tìm kiếm extension này trên google search

    hoặc vào trực tiếp trang chủ cung cấp extension này dành cho các trình duyệt tại đây http://chrispederick.com/work/web-developer/

  2. click vào kết quả tìm kiếm đầu tiên sẽ hiển thị ra extension chúng ta cần. tại đây chúng ta chỉ cần click vào nút màu xanh


    ADD TO CHROME

  3. Sau khi cài đặt xong thì ở góc trên bên phải có xuất hiện một icon nhỏ giống hình bánh răng như dưới đây:

và trong list extention của Chrome sẽ xuất hiện extension này

5 MUST-HAVE Extensions for Web Developers in 2022
5 MUST-HAVE Extensions for Web Developers in 2022

Các chức năng

Nhìn tổng quát thì extension này có các menu chức năng chính như sau:

Tên chức năng Menu các chức năng con
Disable
Cookies
CSS
Forms
Images
Infomation
Miscellaneous
Outline
Resize
Tools
Options

The Best Chrome Extensions

Must-have Chrome extensions for web developers:

  1. Wappalyzer: Identify the technologies powering any website.
  2. HTML Validator: Check HTML code for errors and ensure proper syntax.
  3. JSON Viewer: Render JSON data in a human-readable format.
  4. Web Developer Checklist: Get a checklist of best practices for web development.
  5. React Developer Tools: open-source React JavaScript library.

Must-have Chrome extensions for web designers:

  1. BrowserStack: Live cross-browser testing that lets you preview your website in various browsers.
  2. Window Resizer: Simulate different screen sizes and resolutions.
  3. Clear Cache: Easily clear browser cache and refresh pages.
  4. Lorem Ipsum Generator: Quickly generate placeholder text for your designs.
  5. CSS Viewer: Inspect and analyze CSS styles applied to elements on a webpage.

If you prefer to watch or are on the move, this post has been turned into a high quality video.

The video is less than 5 minutes long and sums up the best Chrome extensions for developers perfectly!

Each extension in this list is tested and regularly used by our in-house developers and designers to increase their work efficiency.

There’s sure to be something here you could use!

WhatFont

WhatFont is a very useful Chrome extension for developers and designers who need to identify fonts used on web pages. It’s fast, effective and identifies individual fonts within a page in seconds. It also identifies the family, size, weight and colour. All within a small popup window in the browser.

WhatFont is ideal for web developers who like to collect examples of great pages they might want to emulate in the future. It’s small, doesn’t use many resources and well worth using. It hasn’t been updated in a while but still works perfectly.

1,000,000+ users

Rating: 3.5/5 for usability

Fonts Ninja

Fonts Ninja works in a similar way to WhatFont to identify fonts within a web page. It’s a useful alternative if WhatFont isn’t working out for you for any reason. It works in much the same but has a smaller interface. Otherwise, the two extensions look and feel very similar.

Install the extension and you should see a small green ninja icon in your toolbar. Open a web page in Chrome, select the icon and hover over a font you want to identify. You should see a page overview popup and an individual popup over the highlighted font. Simple but very effective.

300,000+ users

Rating: 3.5/5 for usability

ColorPick Eyedropper

ColorPick Eyedropper is a Chrome addon tailored to web designers.

This magnifying glass for colors is a super handy tool. It lets you easily identify and select any color on a webpage, even zooming in to capture tiny 1px-wide borders.

While you might not use it daily, having it in your toolkit can be a real-time saver.

Once you install ColorPick Eyedropper, you simply select the colour wheel icon to activate it. Your cursor will change to a crosshair, highlight the section you want to identify and you should see the RGB values and the hex appear on the right of the screen.

1,000,000+ users

Rating: 3.5/5 for usability, zero for UX design

Window Resizer

Window Resizer is an incredibly useful Chrome extension for web developers. It’s simple but very effective, especially when working with responsive designs or apps. It installs into Chrome and will resize any screen you’re working on to a range of popular screen sizes. Extensions like Window Resizer help in developing responsive WordPress themes that look great on desktop and mobile devices.

Most common sizes are covered, mobile, tablet, desktop and the emulation seems very accurate. The guys here use Window Resizer a lot and rate it highly. That’s good enough for us!

600,000+ users

Rating: 4.5/5 for usability and simplicity

BrowserStack

BrowserStack is another exceptionally useful Chrome extension for web developers. Like Window Resizer, this extension allows you to test your work for responsiveness. Rather than different screen sizes, this extension lets you test with different browsers.

Install the extension, open your page in Chrome, select BrowserStack and select a device option from the tab. The page will then be rendered using an emulation of a browser on that device. Simply but very effective. You do need a BrowserStack account for it to work properly though.

100,000+ users

Rating: 3/5 usability is high, the requirement for an account is a definite mark against it.

CSS Viewer

CSS Viewer is another simple but very effective Chrome extension for web developers. As its name implies, this addon shows you the CSS properties of a given page wherever you hover your mouse. A small popup window appears showing you the CSS data that makes up the element you’re pointing at.

Whether you want to create simple WordPress themes or modern and complex ones, this is a very smart extension that makes short work of identifying key CSS properties anywhere you point your mouse.

100,000+ users

Rating: 4/5 for simplicity and ease of use

Lorem Ipsum Generator

Lorem Ipsum Generator is one of the best Chrome extensions full stop. It does what its name suggests it does. It generates filler text for demo websites and does it well.

Simply install the extension, select it within a page, tell it how much Lorem Ipsum copy you want to generate and copy it from the window. Paste it into your page and you’re done.

20,000+ users

Rating 4/5 for ease of use

Compose AI

Compose AI is an extension that can generate diverse text using AI. Using it is really straightforward.

After installing the extension it will seamlessly integrate it into your workflow. Simply type // in the place where you want to add the content, and ask it for what you want!

400,000+ users

4 stars out of 5

Ghostery

Chrome is a great browser for many things but privacy is not among them. Ghostery aims to help with that. It’s a privacy extension designed to block intrusive ads, stop tracking, prevent data collection and block all those page elements that slow you down.

While Ghostery doesn’t provide any useful tools for web development, it keeps your browsing experience clean and makes everything faster. Every Chrome user should install Ghostery!

2,000,000+ users

Rating 5/5 for effectiveness

Wappalyzer

Wappalyzer is a very effective tool for identifying the underlying technologies behind web pages. It quickly identifies web services, CMS type, web analytics tools, plugins, JavaScript libraries and a whole host of other apps. If you want to know the secrets behind a page, this is one way to find out.

Just install the extension, select it while on a page and a popup window will appear highlighting all identifiable apps running on that page.

1,000,000+ users

Rating 4/5 for usefulness and clear UI

Clear Cache

How many times have you modified a setting and wondered why the change wasn’t reflected on screen? You’re not alone, which is why Clear Cache is such a useful Chrome developer extension.

Install the extension and select the small recycle icon in your browser to clear the browser cache. There are no confirmations and no extra dialogs to contend with. This tool just does what it’s supposed to do and we can all move on. We love it for that.

800,000+ users

Rating: 4.5/5 for simplicity

HTML Validator

HTML Validator is a quick tool for checking your HTML within a browser. There are hundreds of HTML tools out there and you’ll likely have a bunch of them already. But HTML Validator is genuinely useful for quickly validating markup within the browser.

Install the extension, open a developer window on the page and navigate to the HTML Validator tab. All your HTML goodness is displayed within with errors at the top.

30,000+ users

Rating: 4/5 for usability but there is lot of competition out there

React Developer Tools

React Developer Tools are specifically for the open source React JavaScript library. If you work with React, this extension helps you inspect the library as required.

Install the extension and you should see two icons appear in the Chrome toolbar. One is for Components and the other for Profiler. Components shows you what React is using on the page and Profiler shows you performance data. If you work with React, this is an essential tool to have!

4,000,000+ users

Rating: 4/5 for ease of use for a niche library

JSON Viewer

JSON Viewer is an alternative to JSONView and helps manage JSON data into a quickly recognizable hierarchy view in a browser window. Working with raw JSON data is fine when you have the time, but using this addon makes the code easier to quickly absorb and use.

It’s a small Chrome developer extension but it’s well worth checking out. With over 800,000 users and glowing reviews, this is definitely an extension to try.

800,000+ users

Rating 4/5 for reliability and ease of use.

ColorZilla

ColorZilla is a superb Chrome extension for designers to get website color codes. It includes an eyedrop colour selector, a colour history tool, a CSS gradient analyzer and a page analyzer that assesses colours on a web page.

If you come across a website whose palette resonates, this tool helps you identify the combinations or individual colours in seconds. It’s an essential extension for anyone who deals with colour on the web.

2,000,000+ users

Rating: 4/5 for usability and productivity

Dimensions

Dimensions is a dynamic measure that uses your mouse. It’s a very useful Chrome developer extension if you want to measure spacing, dimensions, gaps between page elements and anything else you see on the page.

Once installed, you’ll see a small crosshair icon on your toolbar. Open a page in Chrome, select the icon and you should see a crosshair appear on screen. Move it around where you want to measure and you’ll see exact dimensions appear by the cross. Simple but very effective.

100,000+ users

Rating: 4/5 for usability and productivity

Page Ruler

Page Ruler is similar to Dimensions in that it’s a dynamic measurement extension. While Dimensions can measure the height and width of elements, it is more useful for measuring between them. Page Rule measures those elements very accurately.

When you need to measure something, select the ruler icon so it turns orange. The page fades, allowing you to draw the element you want to measure. The extension will then present the exact measurements of the element in a small popup box beside it.

20,000+ users

Rating: 4.5/5 simple but takes a minute to figure out how to use it

UX Check

UX Check is a usability analyzer that assesses a page using Nielsen’s 10 heuristics. It can quickly highlight potential usability issues and enables you to add notes, take a screenshot and export the findings ready to share within the team.

UX Check is a very effective way to perform lightweight user testing without going into too much detail. Ideal as a first pass test before handing a project off for full testing.

30,000+ users

Rating: 4/5 for productivity and ease of use

Check My Links

Check My Links does exactly what it says on the tin. It’s a super-simple way to check for broken links. It can also check for valid links and redirected links as well as broken ones. While technically a dev tool, this Chrome developer extension could be useful for SEO and other specialities too.

Once installed into Chrome, you should see a small checkmark icon in your toolbar. Load your page, select the icon and a popup window will appear with all links assessed. Depending on the size of the page, this might take a few seconds but it works flawlessly.

200,000+ users

Rating: 4.5/5 for usability across web disciplines

Web Developer Checklist

Who doesn’t love a checklist? Web Developer Checklist is a Chrome developer extension that gives you a checklist of all the things that need to be completed on a page before publication. It’s a very useful add-on for busy developers.

Install the extension and you’ll see a code icon appear in the toolbar. Select it while on a page and a popup will appear with best practices you need to complete before publication. They include SEO, mobile, usability, accessibility, social, performance and other selectable measures.

A true lifesaver.

40,000+ users

Rating: 4/5 for ease of use and usefulness

If you’re new to a web development, this extension can significantly enhance your work journey.

Checkbot

Checkbot is similar to the Web Developer Checklist in that it checks a page for links, errors, security, performance, SEO and a range of other considerations. It’s a very useful tool that adds to your repertoire and can be useful for a last pass before publication.

Checkbot installs in the same way all extensions do. Once done, select the blue icon to bring up the sidebar. Use the menus there to select the type of test you want to perform and the results will be displayed on the page.

30,000+ users

Rating: 4/5 for covering basic tools and adding basic security checks

Web Developer

Web Developer is a suite of tools contained within a single Chrome extension. While titled ‘Web Developer’ we think this tool is suitable for general devs too as it contains a range of useful tools that any dev can use.

Once installed, Web Developer is accessible using the small cog icon in the toolbar. Once selected, you should see a small dropdown box appear with a range of options organized into tabs. Select a tab to access the tools within. There is a lot going on here but each tool is genuinely useful.

1,000,000+ users

Rating: 4/5 for having so many tools for so many tasks

EditThisCookie

EditThisCookie is an exceptionally useful Chrome extension for developers. It enables you to edit, delete, create and protect cookies on a per-page basis. It also lets you export them for analysis, block them, import them into JSON and generally do as much as you could possibly need to do to a cookie.

The most useful tool is the ability to search and read cookies. Devs will find most of the tools useful at one point or another.

2,000,000+ users

Rating: 3.5/5 for sheer number of things you can do with a cookie

Lightshot

Lightshot is another of those Chrome developer extensions that could be useful for all kinds of people. While devs will likely use it a lot, UX testers. user testers, instructors, graphic designers and all kinds of users will make great screenshots with this tool.

Once installed, open the page you want to screenshot and select the feather icon. Drag and drop the cursor across the area you want to capture. Select from the popup menu that appears and save the shot.

Rating: 4/5 for being simple but very effective

Session Buddy

Session Buddy is another generalist tool useful for developers and any type of web user. It’s a ‘save it for later’ tool that can save all open tabs in a single session for later access. It is useful when you come across something you want to read later or for protecting productivity if you use multiple tabs.

Once Session buddy has been installed, select the small icon from the toolbar to see all your open tabs. You can select the icon after a browser crash to recover all tabs and save the session to load later. A very useful tool for any web user!

1,000,000+ users

Rating: 4/5 for protecting the world against browser crashes

Daily.dev

daily.dev isn’t a productivity tool per se, but it does make our lives much easier. It’s a news aggregator that specializes in development news. It showcases a page full of news stories, blog posts and useful pages on our chosen subject.

Daily acts like a start page and news aggregator. Select an item on the page to visit that page. Each opens in a new tab and will be a mixture of news, reviews, advice, how-tos and all the good stuff that keeps us growing as developers. This is an excellent extension to use if you like to stay current.

40,000+ users

Rating: 4.5/5 for bringing all our news into one place

Hướng dẫn từng bước xây dựng Chrome Extensions đơn giản
Hướng dẫn từng bước xây dựng Chrome Extensions đơn giản

Lời kết

Extension này cung cấp khá nhiều chức năng hữu ích cho những web developer, rất mong bài viết này có thể giúp ích bạn trong quá trình làm web Hy vọng nhận được nhiều comment của các bạn.

All rights reserved

Bài viết được sự cho phép của tác giả Lê Chí Dũng

Khi develop website chắc hẳng chúng ta cần sự hỗ trợ của một số plugin để tăng tốc develop cũng như kiểm thử lại chất lượng sản phẩm! Sau đây mình sẽ giới thiệu một số extension trên Chrome cho web developer mình hay sử dụng và thấy chúng khá hiệu quả trong việc hỗ trợ công việc của mình.

  1. Page Analytics (by Google)

    Tool analytics được cung cấp bởi Google cho phép bạn dễ dàng xem việc phân tích tracffic website mà bạn đang quản lý.

    Download

  2. PageSpeed Insights Checker for Mobile

    Tool check speed load trên các thiết bị mobile. Bạn sẽ dễ dàng check tốc độ load của các trang web hiện tại với 1 cú click.

    Download

  3. User-Agent Switcher for Chrome

    Tool này sẽ giúp bạn dễ dàng chuyển user-agent bạn muốn trên website để dễ check giao diện, xử lý,…

    Download

  4. Performance-Analyser

    Sau khi cài tool, tool sẽ tự động đo performance khi bạn load website nên khi nào cần xem chỉ cần click để xem không phải load lại trang và nó không ảnh hưởng tốc độ tải website.

    Download

  5. HTTP/2 and SPDY indicator

    Nếu bạn cần test protocol thì không thể thiếu tool này nó sẽ phân tích cho bạn về http1.1, http2,…

    Download

  6. Lighthouse

    Nếu bạn cần 1 bản report chi tiết về hiệu suất về website thì không thể thiếu tool này. Nó được cung cấp bởi Google, thường dùng để check Progressive Web App,….

    Download

  7. Page load time

    Tool này sẽ cung cấp tóm gọn thời gian load của website để bạn biết nên cải thiện những phần nào!

    Download

  8. Image Analyzer

    Tool này sẽ giúp bạn xem thông tin về size, dung lượng, exif… của từng tấm hình hoặc tất cả hình trên website.

    Download

  9. Full Page Screen Capture

    Tool này sẽ chụp hình toàn bộ website từ đầu đến đích trong 10 giây.

    Download

  10. SimilarWeb – Traffic Rank

    Tool này sẽ cho bạn biết thông tin về traffic rank hiện tại của website, nguồn truy cập,…

    Download

Bài viết gốc được đăng tải tại lcdung.top

Có thể bạn quan tâm:

  • 30 tiện ích Chrome (extensions) cho Designer và Developer
  • Công cụ sử dụng trong phát triển Vue.js
  • Apple từ chối phát triển 16 WebAPI cho Safari và thuyết âm mưu

Xem thêm Việc làm Web hấp dẫn trên TopDev

Keywords searched by users: chrome web developer extension

Web Developer
Web Developer
Web Developer
Web Developer
Web Developer Extension
Web Developer Extension
Web Developer
Web Developer
Web Developer
Web Developer
24 Best Chrome Extensions For Web Developers In 2024
24 Best Chrome Extensions For Web Developers In 2024
16 Best Chrome Extensions For Developers In 2023 | Browserstack
16 Best Chrome Extensions For Developers In 2023 | Browserstack
Redux Devtools
Redux Devtools
16 Best Chrome Extensions For Developers In 2023 | Browserstack
16 Best Chrome Extensions For Developers In 2023 | Browserstack
Best Chrome Extensions For Web Developers
Best Chrome Extensions For Web Developers
Web Developer Extension For Chrome
Web Developer Extension For Chrome
How To Enable Chrome Extensions Developer Mode? - Youtube
How To Enable Chrome Extensions Developer Mode? – Youtube
React Developer Tools – React
React Developer Tools – React
16 Best Chrome Extensions For Developers In 2023 | Browserstack
16 Best Chrome Extensions For Developers In 2023 | Browserstack
5 Chrome Extensions Every Web Developer Should Use
5 Chrome Extensions Every Web Developer Should Use
22 Best Chrome Extensions For Developers To Try In 2024
22 Best Chrome Extensions For Developers To Try In 2024
Top 10 Web Development Chrome Extensions You Simply Need To Try! - Youtube
Top 10 Web Development Chrome Extensions You Simply Need To Try! – Youtube
16 Best Chrome Extensions For Developers In 2023 | Browserstack
16 Best Chrome Extensions For Developers In 2023 | Browserstack
Chrome Apps & Extensions Developer Tool
Chrome Apps & Extensions Developer Tool
Giới Thiệu Một Số Extension Trên Chrome Cho Web Developer | Devmaster
Giới Thiệu Một Số Extension Trên Chrome Cho Web Developer | Devmaster

See more here: kientrucannam.vn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *