Wyszukiwanie stylów wbudowanych w JavaScript w celu debugowania kodu JavaScript

Question

SCENARIUSZ: Przejmuję zarządzanie witryną internetową, na której były programista niestety rozłożył wiele istotnych funkcji na wiele długich plików JS. Trudno mi znaleźć, skąd pochodzi wewnętrzny styl CSS w JS lub jaką funkcję stosuje ten styl bezpośrednio do elementu.

PYTANIE: Czy istnieje metoda inżynierii odwrotnej stylów śródliniowych elementu, aby zobaczyć, skąd pochodzą?

Answer 1

Możliwym sposobem jest dodanie punktu przerwania DOM w Chrome Dev Narzędzia

za to do pracy, trzeba dodać punkt przerwania przed styl dodaje. To może być trudne, ale można wymusić przerwania przed załadowaniem jakichkolwiek JavaScript poprzez dodanie następujących bezpośrednio po elemencie HTML w pytaniu

<script>debugger</script> 

Wypróbuj następującego kodu

• kliknij na „Run przycisk fragment kodu”poniżej
• Otwarte Dev Narzędzia
• kliknij prawym przyciskiem akapit
• Wybierz przerwę na ... -> Atrybut modyfikacje
• Kliknij przycisk „Dodaj kolor obramowania”
• Voila, Twój debugger zatrzymuje się na kodzie, który modyfikuje styl

window.onload = function() { 
 
    document.querySelector('button').addEventListener('click', function() { 
 
     document.querySelector('p').style.border = '2px solid red';  
 
    }); 
 
}

<p> Sample Paragraph </p> 
 
<button>Add border color</button>