Можно ли "перешагнуть" браузер, применяя правила CSS для веб-разработки?

Есть ли способ или инструмент, который позволил бы мне шаг за шагом покрасить правила CSS один за другим?

Как и в среде IDE с программным кодом, но с CSS. (Но я бы не захотел этого сделать, взяв исходный код браузера и выполнив основные функции - я просто хочу сказать, что "обновления" по правилам CSS в форме, подобной панели инструментов веб-разработчиков.)

Я ожидаю, что это обычно более утомительно, чем полезно, но в некоторых случаях это действительно помогло бы в веб-разработке, например отладке кошек и сов, или выяснить, как достигается конкретный эффект.

отредактируйте, чтобы уточнить, "перейдя через", я имею в виду sg. например: потенциальная остановка браузера от рисования другого правила, после каждого конца каждое правило, которое я выбираю, перед тем, как будет применен следующий (каждый до завершения "окончательной краски" страницы), для проверки того, что происходит.

отредактируйте 2 после комментарий BoltClock, я заменил слово "render" на "paint", чтобы быть более ясным. Удалено оригинальное, чтобы быть незагроможденным.

Ответ 1

Помимо уже упомянутых webtools, я предполагаю, что это возможно только в том случае, если доступен полный исходный код браузера, чтобы можно было локально отлаживать или удалять отладочную версию самого приложения браузера с точками прерывания, заданными для интересных функций "toplevel".

Например, нет никакой проблемы с загрузкой источника Java-браузера с открытым исходным кодом Lobo, который затем можно отлаживать, как и любое другое приложение, непосредственно из вашей среды IDE, например, eclipse, intellij и т.д.

Однако я не думаю, что полный источник таких продуктов, как MS Internet Explorer, когда-либо будет полностью доступен, чтобы вы могли отлаживать его самую глубокую магию (которая в случае MS Internet Explorer, вероятно, также занимает жизненное пространство...).

Итак, вернувшись в браузер, у которого есть исходный код, вы можете:

Скомпилировать/запустить браузер внутри IDE и напрямую отладить ваш локальный код
Использовать браузер в качестве приложения, позволяющего удаленную отладку и соответствующий исходный код в качестве источника для удаленного отладчика (в основном также из вашей среды IDE).

Таким образом вы можете анализировать глубину магии такого браузера, где вы видите, как собираются, проверяются, анализируются, обрабатываются и отображаются в конечном итоге различные ресурсы, такие как изображения, css и т.д.

Как только интересные функции расположены и установлен хороший (условный) breaktpoints, это может быть очень полезно, когда дело касается поведения конкретного браузера.

Если это, однако, слишком подробно для вашего контекста, я думаю, что нет никакой другой возможности, кроме как полагаться на уже предоставленную функциональность для анализа поведения браузеров, например, с помощью chromes devTools или плагина Mozilla Firebug. Несомненно, это все больше и больше будет интегрировано в такие плагины/инструменты, как комментарий пользователя BoltClock, и всегда стоит изучить функциональность таких плагинов/инструментов, чтобы максимально увеличить их.