Color-codes JS docs by difficulty. 100% free, no account, no AI — runs entirely in your browser.
Users
19
−2 in 30 days
Rating
5.0 / 5
unchanged in 30 days
Ratings
4
0 in 30 days
Store rank
#152K
#127K among extensions
Version
2.1.0
updated 15 Jun 2026
Users
monthly, 6 months
Latest, 16 Oct 2026:19 usersMove the mouse over the chart for any month
Ratings count
monthly, 6 months
Latest, 16 Oct 2026:4 ratingsMove the mouse over the chart for any month
The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.
About Dev to Hero
Learning to code is hard. Documentation is harder. MDN, DevDocs and javascript.info are incredible resources — but they treat a beginner and a senior developer exactly the same way.
Every section looks equally important. Nothing tells you where to start.
Dev to Hero fixes that.
It automatically color-codes every section of a documentation page based on its difficulty level:
🟢 Beginner — read this now
🟡 Intermediate — come back after the basics
🔴 Advanced — no need to stress about this yet
But it goes much further than just color badges:
📌 Smart prerequisites — each section tells you exactly what you need to know first, sorted by learning order and split between required (★) and optional (○) concepts. Each prerequisite links directly to the relevant doc page. Click once to mark as approached, click twice to mark as mastered — synced across all supported sites and sessions.
📊 Page summary — see at a glance how many beginner, intermediate and advanced sections a page contains, which prerequisites you still need to master, plus an estimated reading time.
☐ Track your reading — mark sections as read and watch your progress update in real time.
🎯 Focus mode — show or hide beginner, intermediate and advanced sections independently so you can focus on exactly what's relevant to your level.
📋 Export your study plan — download a clean, structured study plan showing all sections by level, your read status, and prerequisites still to cover.
💡 Next reading suggestions — at the end of every page, Dev to Hero suggests what to read next based on your knowledge.
✎ Report incorrect badges — votes are currently local to your browser. Shared community voting may be added in a future update.
⌨️ Keyboard shortcut — toggle the extension on/off with Alt+Shift+M.
Currently supported sites:
MDN Web Docs (HTML EN + FR, CSS EN + FR, JavaScript EN + FR), DevDocs (HTML EN, CSS EN, JavaScript EN), javascript.info (EN)
6 694 pages covered — with more added regularly.
Coming soon: React, Express, SQL, Python, TypeScript, Markdown fonctionnality online and more.
100% free. No AI. No account. No API. No ads.
Changelog :
[2.1.0] - 2026-06-14
### Added
FRENCH IS HERE !!!! 2.0.4 --> 2.1.0 and a BIG surprise !
- Full HTML & Full CSS & Full JavaScript in french for MDN (2,004 new pages !)
- Now 6,694 pages covered.
- Dev to Hero is now available on Edge and Opera browsers (download on the Chrome Web Store). Firefox is submitted today, I will warn you when it's official.
2026-06-07
- Still on 2.0.4, but with new screenshots on the Chrome Web Store, and the link of the short commercial video.
[2.0.4] - 2026-05-29
### Added
- Full HTML & Full CSS in english for DevDocs
- Full JavaScript for MDN and DevDocs (831 new pages on each website),
with now a total of 979 pages of JavaScript covered on each.
- 2,461 new pages added for MDN and DevDocs. Now 4 690 pages covered.
[2.0.3] - 2026-05-13
### Added
- Full HTML & Full CSS in english for MDN, very soon available for DevDocs
- 908 new pages added in MDN. Now 2,229 pages covered.
[2.0.2] - 2026-05-06
### Added
- Support for 341 DevDocs pages
- Finalized reading tips at the bottom of pages
- 1,321 pages covered by Dev to Hero
### Fixed
- JavaScript MDN EN 148 pages
- Bug fixes
[2.0.1] - 2026-05-04
### Fixed
- Bug fixes