Добавете разширението към Chrome
- Отворете уеб магазина на Chrome и потърсете разширението "DevSuite Pro".
- Кликнете върху "Добавяне към Chrome" и след това потвърдете, като кликнете върху "Добавяне на разширение" в изскачащия прозорец.
64+ мощни инструмента за инспектиране, измерване, заснемане, анализ и дизайн на уеб страници директно във вашия браузър.
Започването е лесно. Инсталирайте разширението, отворете всяка уеб страница и получете достъп до 64+ инструмента за разработчици от изскачащия прозорец или плаващия панел. Не е необходима конфигурация.
DevSuite Pro предлага 64+ инструмента за инспектиране на страници, измерване, дизайн и анализ. Ускорете работния си процес с мощни функции, вградени директно във вашия браузър.
Задръжте курсора на мишката върху всеки елемент, за да видите незабавно неговите CSS стилове и да ги редактирате на живо, което прави отстраняването на грешки и корекциите на дизайна в реално време изключително лесни.
Научете повече →Кликнете върху всеки елемент, за да проверите неговите свойства, размери, разстояния, шрифтове и цветове. Разберете структурата на страницата незабавно, без да отваряте DevTools на браузър.
Научете повече →Измервайте разстояния, проверявайте подравняването и добавяйте прецизни до пиксел линийки и водачи към всяка уеб страница, за да сте сигурни, че дизайнът ви е перфектно подравнен.
Научете повече →Вземете цветове от всеки елемент на страницата и копирайте HEX, RGB или HSL стойностите в клипборда си само с едно кликване.
Научете повече →Заснемайте екранни снимки на цяла страница или видимата област на всяка уеб страница и ги изтегляйте незабавно — идеално за споделяне на дизайн и докладване на грешки.
Научете повече →Прегледайте уеб страницата в различни размери на екрана и разделителни способности на устройствата, за да тествате адаптивния дизайн, без да напускате браузъра.
Научете повече →Инспектиране и редактиране на CSS стилове на живо
Инструментът CSS Inspector е мощен инструмент за разработчици, който ви позволява да виждате всички CSS свойства на…
Отстраняване на грешки и управление на CSS анимации в реално време
Инспекторът на анимации ви дава пълен контрол над всяка CSS анимация и преход, работещи на която и да е уебстраница…
Конвертирай CSS на всеки елемент в Tailwind Utility Classes
„Копирай като Tailwind“ свързва визуалния дизайн и кода на Tailwind CSS.
Визуализирайте пълната структура на оформлението на всяка страница
Режимът само с очертания добавя цветно кодирани контурни граници към всеки HTML елемент на уебстраницата, като ви дава…
Получете категоризирани Tailwind класове за всеки елемент
Помощникът за Tailwind инспектира всеки елемент на уебстраницата и генерира изчерпателна, категоризирана разбивка на…
Визуален DOM дървовиден изглед върху всяка уебстраница
Инструментът за структура на страницата (Page Outliner) изобразява пълната DOM структура на всяка уебстраница като…
Открийте React, Vue, Angular и Svelte компоненти на всеки сайт
Детекторът на компоненти автоматично идентифицира коя фронтенд рамка (framework) използва даден уебсайт и разкрива…
Плъзнете и пуснете (Drag & Drop), за да промените позицията на всеки елемент на страницата
Инструментът за преместване на елементи ви позволява да кликнете върху който и да е елемент на уебстраницата и…
Премахнете или превключете видимостта на всеки елемент
Delete/Hide Element ви позволява да премахнете или временно да скриете всеки елемент на уебстраницата с едно щракване…
Експортирайте всеки елемент като HTML, CSS или JSON
Export Element ви позволява да кликнете върху който и да е елемент на уебстраницата и да експортирате пълната му…
Генерирайте React, Vue и Svelte компоненти от всеки елемент
Copy Component Code трансформира всеки елемент на уебстраница в чист, готов за производство компонентен файл за…
Заснемане на видимата област или екранни снимки на цялата страница
Скрийншотът прави висококачествени изображения на всяка уебстраница в два режима: видима област (точно това, което…
Преглеждайте, избирайте и изтегляйте всички изображения от всяка уебстраница
Extract Images сканира всяка уебстраница и представя всяко изображение в галерия за разглеждане. Вижте миниатюри…
Намирайте, преглеждайте и изтегляйте всеки SVG от всяка страница
SVG Grabber открива всеки SVG на уебстраница — вградени (inline) SVG елементи, препратки към външни .svg файлове, SVG…
Заменете всяко изображение на страницата със свое собствено
Image Replacer ви позволява да кликнете върху всяко изображение на уебстраница и да го замените със свое собствено…
Генерирайте QR кодове за всеки URL или текст мигновено
QR Code Generator автоматично създава сканируем QR код за текущия URL адрес на страницата — или за всеки персонализиран…
Линеали, водачи и измервания с пикселна точност на всяка страница
Page Ruler добавя линеали в стил Photoshop и подвижни помощни линии (водачи) към всяка уебстраница. Линеалите с…
Преглеждайте едновременно множество изгледи за различни устройства
Responsive Viewer показва текущата уебстраница, рендирана в размерите на множество изгледи (viewports) на устройства…
Измервайте точни пикселни разстояния между всеки два елемента
Measure Distance ви позволява да кликнете върху всеки два елемента на уебстраница и незабавно да видите точното…
Визуализирайте всеки контекст на наслагване и Z-Index слой
Z-Index Inspector разкрива пълния ред на наслагване на всеки елемент на уебстраницата. Всеки елемент със стойност на…
Инспектирайте оформления на CSS Grid и Flexbox с визуални слоеве
Grid/Flex Visualizer открива всеки CSS Grid и Flexbox контейнер на уебстраница и рендира структурата на тяхното…
Симулирайте горещи точки на потребителско внимание на всяка страница
Heatmap Simulator генерира прогнозна топлинна карта на вниманието за всяка уебстраница въз основа на установени модели…
Селективно изчистване на кеш, бисквитки, localStorage и sessionStorage
Clear Browsing Data предоставя на разработчиците бърз и селективен начин за изчистване на специфични типове данни за…
Открийте всяка технология, стояща зад всеки уебсайт
Site Stack сканира всеки уебсайт и идентифицира пълния му технологичен стек — frontend рамки (React, Vue, Angular…
Изчерпателен SEO одит: Мета тагове, заглавия, OpenGraph и други
SEO Inspector осигурява мигновен и изчерпателен SEO одит на всяка уебстраница.
Автоматизиран WCAG одит: Контраст, Alt текст, ARIA и други
Accessibility Inspector извършва автоматизирани проверки по WCAG 2.1 Level AA на всяка уебстраница и създава…
Кликнете върху всеки текст на всяка страница, за да го редактирате незабавно
Live Text Editor прави всеки текстов елемент на една уебстраница редактируем с едно щракване. Променяйте заглавия…
Заменете всеки шрифт глобално или по елемент от Google Fonts
Fonts Changer ви позволява да замените всеки шрифт на уебстраница с различен от библиотеката на Google Fonts — или…
Открийте всеки шрифт, използван на която и да е уебстраница
List All Fonts сканира всяка уебстраница и представя пълен инвентар на всяко семейство шрифтове в употреба — уеб…
Прецизна пипета за HEX, RGB и HSL стойности на цветовете
Color Picker предоставя прецизен инструмент с пипета (eyedropper) за избиране на цветове от всеки елемент на…
Извлечете пълната цветова палитра от всяка уебстраница
Color Palette сканира всеки елемент на уебстраница и извлича пълния набор от използвани цветове — от текст и фонове до…
Приложете тъмен режим към всеки уебсайт мигновено
Force Dark Mode прилага тъмна цветова схема към всеки уебсайт, който не предлага такава — или пренебрегва светлата тема…
Незабавно активирайте или деактивирайте JavaScript за всеки таб
Toggle JavaScript деактивира или активира отново изпълнението на JavaScript за текущия таб на браузъра с едно кликване…
Преглеждайте, редактирайте, добавяйте и изтривайте бисквитки за всеки домейн
Cookie Editor показва всички бисквитки за текущия домейн в чиста, подлежаща на сортиране таблица. Вижте имената на…
Преглеждайте изхода на конзолата в плаващ панел — без DevTools
Console Logger улавя целия изход на конзолата (console.log, console.warn, console.error, console.info) и го показва в…
Следете всички мрежови заявки в реално време
Network Monitor улавя и показва всяка мрежова заявка, направена от текущата страница — повиквания на XHR/Fetch API…
Преглеждайте, редактирайте, добавяйте и изтривайте localStorage и sessionStorage
Local Storage Editor предоставя чист табличен интерфейс за управление на localStorage и sessionStorage записите за…
Сканирайте всяка връзка на страницата и открийте счупените
Broken Link Checker сканира всяка връзка на текущата страница – href атрибути на анкери, източници на изображения…
Незабавно табло за производителност: Време за зареждане, DOM статистика и ресурси
Page Performance предоставя мигновен преглед на производителността на всяка уеб страница – показатели за времето на…
Форматирайте, минифицирайте и валидирайте JSON с едно кликване
JSON Formatter форматира красиво, минифицира и валидира JSON директно във вашия браузър. Поставете произволен JSON низ…
Кодирайте низове от и към Base64 мигновено
Base64 Encoder/Decoder преобразува текст в Base64 и Base64 обратно в текст директно във вашия браузър. Кодирането…
Кодирайте и декодирайте URL низове с едно кликване
URL Encoder/Decoder преобразува URL низове от и към тяхната процентно кодирана форма.
Кодирайте и декодирайте HTML ентитети мигновено
HTML Entity Encoder преобразува специални символи (< > & " ') в техните HTML еквиваленти на ентитети (< > &…
Екранирайте и премахвайте екраниране на низове за код
Backslash Escape/Unescape преобразува низове от и към тяхната екранирана форма (\n \t \r \" \' \\ и Unicode екраниращи…
Конвертирайте изображения от и към Base64 Data URI
Image ↔ Base64 конвертира файлове с изображения (PNG, JPG, SVG, WebP, GIF) в Base64-кодирани data URI и обратно…
Декодирайте JSON Web Tokens мигновено
JWT Debugger декодира и анализира JSON Web Tokens — разчита header, payload и signature, показва claims и отбелязва…
Генерирайте масово идентификатори UUID v4
UUID Generator произвежда криптографски силни идентификатори UUID v4, използвайки crypto API на браузъра. Генерирайте…
Изчислете MD5, SHA-1, SHA-256, SHA-384, SHA-512 хешове
Hash Generator изчислява криптографски хешове (MD5, SHA-1, SHA-256, SHA-384, SHA-512) на всякакъв текстов вход. И петте…
Генерирайте криптографски силни пароли
Password Generator произвежда силни, случайни пароли, използвайки криптографския API за случайност на браузъра…
Тествайте регулярни изрази на живо с открояване на съвпаденията
Regex Tester оценява регулярни изрази спрямо тестов текст в реално време.
Преобразувайте Unix, ISO и четими за хора дати
Timestamp Converter превежда между Unix времеви маркери (секунди, милисекунди, микросекунди, наносекунди), ISO 8601…
Сравнявайте два текстови блока ред по ред
Diff Tool сравнява два текстови блока и откроява добавени, премахнати и непроменени редове с цветно кодиран изход…
Проверете WCAG контрастното съотношение на произволни два цвята
Contrast Checker изчислява WCAG 2.1 контрастното съотношение между два цвята и ги оценява спрямо праговете AA/AAA за…
Преобразувайте HEX, RGB, HSL, HSV и OKLCH мигновено
Color Format Converter превежда произволен цвят между HEX, RGB, HSL, HSV и OKLCH.
Извлечете доминиращата палитра от всяко изображение
Image Color Extractor анализира всеки файл с изображение (пуснете, поставете или кликнете за зареждане) и връща до 16…
Получете CSS селектори и XPath за всеки елемент
DOM Path Finder ви позволява да задържите курсора над всеки елемент на страницата, за да разкриете неговия уникален CSS…
Тествайте заявки между произходи и проверете CORS хедъри
CORS Checker тества дали заявка от друг произход от вашия сайт би била разрешена от целевия сървър. Изпълнява preflight…
Прихващайте WebSocket фреймове в реално време
WebSocket Inspector прихваща всеки WebSocket фрейм — изпратен и получен — от всички връзки на страницата. Показва…
Сканирайте страницата за счупени изображения мигновено
Broken Image Finder сканира всеки <img> и CSS background-image на страницата, открива неуспешни зареждания (404 грешки…
Автоматично попълване на формуляри с реалистични тестови данни
Form Filler попълва всяко видимо поле на формуляр на страницата с реалистични тестови данни — име, имейл, телефон…
Конвертиране между CSV и JSON в двете посоки
CSV ↔ JSON Converter обработва пълния кръгов преход между двата най-разпространени табличен формата. Умният CSV парсе�…
Форматиране, валидиране и преглед на XML с синтактично оцветяване
XML Formatter форматира красиво, минифицира и валидира XML направо в браузъра.
Разкрасяване и форматиране на SQL заявки
SQL Formatter преобразува минифициран или разбъркан SQL в четими, отстъпени заявки.
Запазвайте уеб страници като чисти PDF файлове
Convert to PDF запазва текущата уеб страница като PDF чрез диалоговия прозорец за печат на браузъра, с предварително…
Изберете най-добрия план за вашия работен процес. Започнете безплатно, надстройте по всяко време.
Често задавани въпроси относно функциите и използването на разширението DevSuite Pro. Ако имате въпрос, отговорът може да е по-долу.
Посетете уеб магазина на Chrome, потърсете "DevSuite Pro", кликнете върху "Добавяне към Chrome" и потвърдете, като изберете "Добавяне на разширение". След инсталиране иконата на разширението ще се появи в лентата с инструменти на вашия браузър. Кликнете върху нея, за да получите незабавен достъп до 64+ инструмента за разработчици.
Безплатните инструменти (43+) са достъпни за всеки без лиценз. Професионалните инструменти имат златен PRO бадж и изискват активен Pro лиценз за използване. Можете да видите кои инструменти са безплатни или професионални в изскачащия прозорец — безплатните инструменти нямат икона на катинар, докато професионалните инструменти ще изглеждат леко сиви, докато не активирате лиценза си.
Някои уебсайтове имат строги политики за сигурност на съдържанието (CSP), които блокират определени действия на разширенията на браузъра. Това е особено често при банкови и правителствени уебсайтове. Също така, вътрешните страници на Chrome (chrome://) не позволяват на разширенията да изпълняват скриптове за съдържание.
Не. Всички промени, направени от инструменти като Преместване на елемент, Редактор на текст на живо, Изтриване/скриване на елемент и CSS Inspector, са временни. Те засягат само това, което виждате в браузъра си в момента. Опресняването на страницата ще върне всичко в първоначалното му състояние.
Отворете изскачащия прозорец на DevSuite Pro, кликвете върху иконата на настройките в горния десен ъгъл. Слезте до секцията за лиценз, поставете лицензионния си ключ в полето и кликнете върху Активиране. Ако ключът е валиден, баджът ще се промени от FREE на PRO и всички професионални инструменти ще бъдат отключени незабавно.
Можете да преместите панела, като отидете в Настройки и изберете различна позиция на страничната лента — Горе, Долу, Ляво или Дясно. Можете също така напълно да скриете панела, като изключите превключвателя "Показване на панел на страници" в Настройки или като натиснете Ctrl+Shift+X по всяко време.
Не. DevSuite Pro не събира, проследява или предава нито една от вашите данни за сърфиране. Всички настройки се съхраняват локално във вашия браузър. Единствената външна заявка се изпраща по време на активиране на лицензионния ключ, за да се провери вашият ключ с нашия сървър.
Да! DevSuite Pro е наличен както в уеб магазина на Chrome, така и в добавките за Firefox. Работи на Chrome, Edge, Brave и други браузъри, базирани на Chromium, както и на Firefox.