Izstrādātājs atkļūdo DOM elementus savā lapā ar vienu koda līniju

Cik reizes tu esi cīnījies atrast vienu konkrētu problēmu izsauc savu CSS izkārtojumu? No trūkstošajiem noslēguma tagiem uz nepareizi iebūvētajiem brāļiem un māsām, CSS jautājumi ir desmiti. Un ar šis CSS izkārtojuma atkļūdotājs, procesu daudz vieglāk.

Šī būs viena koda rinda šķērso DOM un iezīmējiet katru elementu ar citu krāsu. Tādā veidā jūs varat labāk vizualizēt kā jūsu CSS darbojas (vai nedarbojas) un ātri atrisināt problēmu jomas.

GitHub ļauj izstrādātājiem saglabāt mazus koda bitus sauc Gists. Tie visi ir atvērti un brīvi pieejami izņemot pašu lietošanai. Tāpēc šis CSS atkļūdotājs ir tik noderīgs. Tā apvieno modernu Chrome DevTools spēju Ar pārlūkprogrammas grāmatzīmju vienkāršība.

Lai izmantotu šo kodu, vispirms jums vajadzētu kopējiet, kura versija jums patīk vislabāk no Gist lapas. Tad tu ielīmējiet šo kodu logā un palaist to. Jums vajadzētu beigties ar līdzīgs rezultāts:

Tagad ir iespējams saglabājiet šo kodu kā grāmatzīmi pārlūkprogrammas rīkjoslā. Bet, ja jūs esat Chrome lietotājs, varat saglabājiet šo JS kodu kā koda fragmentu kas ir daudz vieglāk darboties.

Šis koda fragments var būt atkal un atkal uz pogas klikšķa. Jūs varat analizēt katru lapu, pilns ar šiem krāsainajiem CSS kontūriem, gan DOM elementiem vecākiem, gan bērniem.

Tomēr jums nevajadzētu justies ierobežotam tikai ar Chrome. Šis fragments darbojas visām galvenajām pārlūkprogrammām, ieskaitot Firefox, Safari, Opera un Internet Explorer.

Un ikvienam, kas vēlas uzzināt, kā tas darbojas, varat pārbaudīt anotēta versija ar komentāriem par katru kodu.

Šis Gist ir pilns saistītie lietotāju komentāri un atjauninājumi no citiem izstrādātājiem palīdzot padarīt to mazāku un efektīvāku. Bet pašreizējā situācijā tas ir viens no vienkāršākajiem veidiem atkļūdot jebkuru DOM ar vienu kodu.