Web Developer Google Chrome Extension | The Best Chrome Extensions

Some time ago, we reviewed the new Firefox browser designed for developers.

Since then, most of our developers kept Google Chrome as their primary browser.

Working with Chrome offers access to an immense repository of the best Chrome extensions for developers, web services, and tools which makes our daily tasks less of a chore.

With the built-in web developer tools now, there is no further need for more tools.

However, I’d like to present you with 22 of the best Google Chrome+ extensions for web developers or app developers to try in 2024.

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.

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

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!

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

How to make/develop a Chrome Plugins and Addons – How to Do It!

Chrome extensions or add-ons for Chrome are small software applications that introduce new features and make your web developer browsing experience more convenient.

They allow users to tailor browser functionality and aesthetics on different devices according to their personal preferences. Coding extensions is usually done using a multitude of programming languages including JS, HTML, and CSS.

Coding Extensions – Step by Step Guide

When coding chrome extensions for developers, first of all you need to create a folder and add the following files.

Step 1 – manifest.json

This is the file that will provide Chrome with basic information related to your extension such as required permission and its name. The majority of the variables in the manifest file are quite self-explanatory and you can change any of them. The matches variable is responsible for running the select content.js when the extension helps a particular webpage is launched.

• “
  
  ”: will match any URL that begins with an approved scheme such as http:, https:, file:, ftp:, or chrome-extension:.
  
• “http://*/*”: will match any URL that uses the http: scheme.
• “https://*/*”: will match any URL that uses the https: scheme.
• “*://*/*”: will match any URL that uses the https: or http: scheme.

Step 2 – content.js

This is a JavaScript file that’s executed in the context of web pages. It means that this file enables content script to interact with websites and web pages that the user opens in their Chrome browser.

Step 3 – Image Icon

Add your icon file in png format to the folder. You can either download or create an icon for your extension.

Step 4 – background.js

While you have installed the extension, there are no instructions present. Create a file named background.js and add a background script. Place this file in the extension folder. Ensure that you’ve registered your background script in the manifest which tells your extension what files to reference and how certain files will act.

Step 5 – Creating and Naming Extension

Once you are done, add all the files to a folder and name it after your extension.

Intuitive design is how we give the user new superpowers.

Jared Spool – Founder, User Interface Engineering

This article on the best chrome extensions made for developers was brought to you by Usersnap – a visual customer feedback software used by software companies like Facebook, Airbus, and Microsoft.

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é!

How to Use and Manage Chrome extensions for devs

Google Chrome extensions can significantly enhance a developer’s workflow. Here’s a brief guide:

• Installation: Find and install developer-focused extensions from the Chrome Web Store.
• Access: Locate extensions in the toolbar or Extensions menu.
• Developer Tools: Right-click to inspect web pages and utilize built-in Developer Tools for debugging.
• Configuration: Customize extension settings for tailored functionality.
• Usage: Activate tools like JSON viewers, form fillers, and responsive design testers.
• Testing: Simulate user agents and screen sizes for cross-browser testing.
• Version Control: Integrate Git workflows and manage repositories.
• Updates: Keep extensions updated for the latest features and security patches.
• Security: Install extensions only from trusted sources and review permissions.
• Removal: Easily remove unnecessary extensions from the Extensions menu.

With these extensions, you can optimize your coding, testing, and debugging, making web development more efficient.

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

How to Find and Add extensions to Chrome

Enhance your browsing experience by adding extensions to Google Chrome. These small software add-ons provide extra functionality and features. Here’s how to find and install them:

• Open Chrome: Launch Google Chrome on your computer.
• Access Web Store: Click the three dots in the top-right, select “More tools,” and click “Extensions.” Or enter “chrome://extensions/” in the address bar.
• Search Extensions: Explore the Chrome Web Store by browsing or using keywords.
• Add Extension: Click on an extension you like and press “Add to Chrome.”
• Confirm: Review the permissions and click “Add Extension.”
• Installation: Chrome will download and install the extension.
• Extension Icon: Find the extension’s icon in the toolbar or menu.
• Configure & Use: Customize settings and start using the extension.
• Manage Extensions: Easily enable, disable, or remove extensions in the Extensions menu.

Remember, choose extensions from trusted sources for security and reliability.

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

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.

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.

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.

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.

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!

Web developer extension for Chrome

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

List of 22 best Chrome extensions tools for web developers in 2024

Usersnap Chrome extension

The Usersnap Chrome extension lets you capture and annotate any web page directly in your browser. It’s super-easy to provide visual feedback on prototypes or report bugs with this Google extension.

And all created screenshots and screen recordings are directly stored in your project dashboard, making bug tracking and feedback a lot of fun!

Click the image to see Usersnap’s Chrome extension in action (YouTube video) ⤵️

Usersnap is an award-winning bug tracking and feedback tool, featured by Inc., Forbes, Techcrunch, and The Huffington Post.

It is loved by companies such as Google, Facebook, Microsoft who use Usersnap on a daily basis to work together on web development projects.

Try Usersnap for free for 15 days here.

Learning to write programs stretches your mind, and helps you think better, creates a way of thinking about things that I think is helpful in all domains.

Bill Gates – Founder, Microsoft

Web Developer extension

The web developer extension for Chrome adds a little toolbar with different tools available. The original concept of this web developer extension for Chrome extension used for developers came from the PNH Developer Toolbar.

The Google extension web developers have a lot of handy tools a developer can use in their day-to-day work – for graphic designers as well as programmers.

It allows you to do a lot more than the standard Chrome Inspector, like being able to easily add outlines to elements just by clicking, displaying rulers, finding all broken images on a page, and lots more.

Link: Web developer extension.

Hiver – Chrome extension

This is a tool that helps teams manage group inboxes like engineering@ and bugs@, right from Gmail.

With Hiver, critical emails – regarding support escalations and other technical and bug reports and problems – arriving in these inboxes can be auto-assigned to individual developers and kept track of in real-time, till the point of resolution.

Link: Hiver

f19N Obtrusive Live Test

This Chrome extension for developers is a sandboxed, extendable Webpage Testing Framework.

It allows devs to test all pages on predefined best practices such as SEO or web performance. It is very simple to create the tests yourself.

You get direct visual feedback and see what is happening in the browser during page loads and render lifecycles.

Link: F19N Obtrusive Live Test

ClickUp

ClickUp is an all-in-one productivity solution for software teams to plan, collaborate, and manage projects in one centralized work hub.

Known for its rich set of customizable features, ClickUp packs six of its most dynamic project management tools into its Chrome Extension to help developers create detailed tasks, track time, annotate screenshots, or take notes from any open tab.

Since it’s directly connected to your workflows, every action you take using the Chrome Extension is automatically updated in your ClickUp Workspace across devices, in real-time.

ClickUp’s Chrome Extension will boost productivity by streamlining your task creation and feedback processes while eliminating the need to open, close, or click between windows as you work.

Link: ClickUp Chrome Extension

Window Resizer for Developer

The Window Resizer browser extension lets you resize your browser window on the fly.

Clicking on the icon in the menu bar produces a drop-down menu of window sizes that you can customize.

What’s neat about the Window Resizer is that it offers an option to launch it as a pop-up, enabling you to switch through different screen resolutions and see if your media breakpoints are working as expected.

On top of that, you can also rotate your screen and customize the presets.

Resize the browser window to emulate various screen resolutions.

Link: Window Resizer

ColorPicker Chrome – Eyedropper for web page

ColorPick Eyedropper is a simple color picker tool that allows you to select color values from any web page.

Link: ColorPick Eyedropper

CSSViewer – web developer extension

CSSViewer is helpful chrome extension with a simple CSS property viewer. It provides a floating panel that reports on the identity of the section that the mouse is over, along with its font, text, color, background, box, positioning, and effects attributes.

CSSViewer provided the basic CSS information you need quickly. Make sure to install this useful Chrome extension.

Link: CSS Viewer

Lorem Ipsum generator

The lorem ipsum generator does what its name states. It provides an easy and quick way to create default text. Definitely, this is a quick win if you need some default text as a placeholder.

Link: Lorem Ipsum Generator

actiTIME

actiTIME Timer tool helps every web developer to keep track of work hours directly from the web browser and web apps such as Jira. It is used by companies and freelancers for analyzing performance and controlling the project’s progress and profitability.

Link: actiTIME

Ghostery

Ghostery is a great Google extension for web developers that detects trackers, pixels, and any other embedded snippets on a website.

You immediately see which plugins and trackers are installed on the web page you’ve visited. Further on, Ghostery lets you protect your privacy. There’s no registration or sign-up required to use this Chrome extension.

See who’s tracking your web browsing with Ghostery.

Link: Ghostery

Wappalyzer Chrome Exstension

Similar to Ghostery, the Wappalyzer Chrome extension lets you identify software that is installed on any particular website.

It uncovers technologies and. as content management systems, eCommerce platforms, web servers, JavaScript frameworks, and installed analytics tools.

Identify web technologies with Wappalyzer.

Link: Wappalyzer

IE Tab

In need to do some manual IE testing and don’t want to install all kinds of different Internet Explorer versions?

Check out the IE Tab extension for Chrome which emulates IE by using the IE rendering engine directly in Chrome. You can test your website for IE6, IE7, IE8, or IE9 directly in your chrome browser.

Unfortunately, the IE Tab Chrome extension is only available for Windows at the moment.

Link: IE Tab

Spider Free

If you need to find broken links on your site and want to restrict spidering to a specific directory you need Site Spider Free.

Link: Spider free

Session Manager

When you’re working on the web, browser tabs management is a great skill. Session Manager is your Chrome extension for web developers to go.

It saves your browsing state and lets you re-open the session later. It is particularly useful if you find yourself opening the same web page over and over.

Link: Session Manager

Clear Cache – Web developer Chrome extension

This extremely useful Chrome extension allows you to clear your cache from the toolbar. It works “behind-the-scenes” meaning there are no popups or confirmation dialogs to distract you.

It’s customizable in terms of how much data you want to clear, including app cache, downloads, file systems, form data, history, local storage, passwords, and much more.

Link: Clear Cache

JSONVue

As a developer working with RESTful APIs, reading raw JSON data on a browser can be quite awkward. It’s much easier to read JSON in tree-view, rather than in its raw state.

The Chrome extension JSONView helps you view JSON documents in the browser.

Link: JSON Viewer

Marker.io

Marker.io is a versatile Chrome extension designed to streamline the feedback and bug reporting process for every web developer. With Marker.io, capturing and sharing feedback about web pages becomes effortless.

This tool allows you to take screenshots of web pages and annotate them with comments, highlights, and annotations directly within the browser.

It simplifies communication between developers, designers, and clients by providing a visual context to issues or suggestions. Marker.io supports integration with popular project management and collaboration tools, making it an indispensable asset for efficient web development workflows.

BrowserStack Chrome extension

The BrowserStack Chrome extension is a handy tool for web developers to test the compatibility of their websites across different browsers and devices.

With this extension, you can quickly preview your site’s appearance and functionality on various platforms, ensuring a smooth user experience.

By providing instant access to BrowserStack’s testing capabilities, this extension simplifies the process of identifying and resolving cross-browser issues during development.

Link: BrowserStack Chrome Extension

LightShot Chrome Extension

The LightShot Chrome extension offers a convenient way for web developers to capture and share screenshots directly from the browser.

With a simple click, you can select and capture a specific area of a web page, add annotations, and quickly share the image with colleagues or clients.

This tool streamlines the process of visually communicating design ideas, issues, or concepts, making it a valuable asset for collaborative web development projects.

Link: LightShot Chrome Extension

Grepper Chrome Extension

The Grepper Chrome Extension is a powerful tool for developers seeking quick and effective solutions to coding problems.

By integrating seamlessly into your browser, this extension provides easy access to a vast collection of code snippets and solutions from various programming communities. Whether you’re troubleshooting an issue or looking to learn new techniques, Grepper simplifies the process of finding relevant code examples, saving you time and enhancing your coding proficiency.

Link: Grepper Chrome Extension

ModHeader Chrome Extension

The ModHeader Chrome Extension is an essential tool for web developers engaged in HTTP header analysis and manipulation.

With ModHeader, you can easily modify HTTP headers for web requests, enabling you to test and debug your web applications with greater control.

This extension is particularly valuable for tasks like testing API integrations, simulating different environments, and diagnosing issues related to headers. Its user-friendly interface empowers developers to make real-time adjustments and fine-tune their projects for optimal performance.

Link: ModHeader Chrome Extension

How to See or View Chrome Extensions

To see or view Chrome extensions for web, that are currently installed in your Google Chrome browser, follow these steps:

• Open Chrome: Launch the Google Chrome browser on your computer.
• Access Extensions:
  • Option 1: Click on the three vertical dots in the top-right corner of the Chrome window. From the dropdown menu, hover your cursor over “Extensions,” and then click on “Manage extensions.”
  • Option 2: Alternatively, you can directly enter “chrome://extensions/” in the address bar and press Enter.
• View Installed Extensions:
  • You will be directed to the “Extensions” page, where you can see a list of all the extensions currently installed in your browser.
• Explore and Manage:
  • From the Extensions page, you can explore each extension’s options, settings, permissions, and other details.
  • Some extensions might have icons that appear in the Chrome toolbar, which you can interact with.
• Enable, Disable, or Remove:
  • To enable or disable an extension, use the toggle switch next to the extension’s name.
  • To remove an extension, click on the “Remove” button below the extension’s details.

Remember that managing your extensions allows you to keep your browser organized and tailored to your needs. Make sure to only install extensions from trusted sources to maintain security.

Keywords searched by users: web developer google chrome extension

Categories: Chi tiết 64 Web Developer Google Chrome Extension

See more here: kientrucannam.vn

See more: https://kientrucannam.vn/vn/