TGViewer
<divelopers> <divelopers> @alexnozer_dev · 1.19K subscribers
Post #25 187
Интерфейс Chrome DevTools

Интересный факт, о котором, возможно, все знают, но тем не менее: интерфейс Chrome DevTools сделан на HTML, CSS и JS. На скриншоте слева DevTools, открытые на ютубе, а справа DevTools, открытые для DevTools слева. Можно увидеть разметку кастомного свойства панели Styles.

То есть все кнопки, вкладки, поля ввода, селекторы цветов, инспектор DOM и CSS, все панели и т.д. - сделаны на нативных веб-технологиях. И все это можно изучить, открыв DevTools для DevTools (хоть и не просто так). Для меня это стало небольшим открытием. В принципе бОльшая часть UI хрома сделана на нативных технологиях: стартовый экран, настройки, магазин расширений. Получается, что программа, которая отображает веб сама сделана на вебе. Что, на мой взгляд, довольно интересно. Также интересно взглянуть на некоторые технические решения, применяемые в DevTools, потому что это, по сути, веб-приложение с довольно нетривиальным функционалом.
  • 👍 7
  • 🥰 1
More from @alexnozer_dev
  1. Sep 28, 2026You don’t know HTML: SGML, HTML, XML, XHTML За свою историю язык разметки гипертекста HTML…
  2. Sep 23, 2026Images Preview На некоторых сайтах, где надо показывать изображения в высоком качестве, дл…
  3. Sep 21, 2026Реализация пользовательских атрибутов Под конец прошлого года я рассказывал об API пользов…
  4. Sep 14, 2026Подклассы Event вместо CustomEvent Многие библиотеки предоставляют систему событий в качес…
  5. Sep 11, 2026Эволюция стилей в темах Shopify Адам Ватан на днях поделился новостью, что Shopify выкупил…
  6. Sep 9, 2026Persistent Widgets Многие сайты не должны быть SPA. Но иногда эта архитектура продиктована…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →