CSS Stacking Context inspector in Chrome kasama ang OffiDocs

DESCRIPTION

Nasubukan mo na bang gamitin ang z-index property, para lang malaman na, gaano man kataas ang itinakda mo, hindi ito gagana gaya ng inaasahan? Iyon ay dahil ang z-index property ay umaasa sa isang implicit na konsepto na tinatawag na "stacking contexts".

Pagkatapos hanapin kung ano ang mga ito at kung paano gumagana ang mga ito (mga impormasyong mahahanap mo sa MDN), maaari mong gamitin ang extension ng devtools na ito upang suriin ang mga kontekstong ito at i-troubleshoot ang anumang problema sa z-index na maaari mong harapin.

Ang extension na ito ay magdaragdag ng bagong panel na magpapakita ng mga stacking na konteksto sa isang tree view, at magdaragdag din ng bagong sidebar sa panel ng mga elemento na may ilang kapaki-pakinabang na impormasyon tungkol sa napiling elemento.

Upang suriin ang isang malalim na dokumentasyon mangyaring sumangguni sa pahina ng github: https://github.

com/andreadev-it/stacking-contexts-inspector Kung gusto mong mag-ulat ng isyu o gumawa ng feature request, pakigamit ang seksyong Isyu sa nabanggit na github repository.

CHANGELOG: • v.

1.1.13 - Inilipat sa manifest v3. Nagdagdag din ng z-index sa stacking context panel sidepan.

• v.

1.1.12 - Inayos ang bug na may mga property na may prefix na vendor na hindi nakita kapag tumitingin ng mga konteksto ng stacking.

• v.

1.1.11 - Nagdagdag ng z-index na halaga sa seksyong "Mga detalye ng konteksto" sa sidebar.

• v.

1.1.10 - Inalis ang hindi kinakailangang kahilingan sa pahintulot upang sumunod sa CWS Security Policy.

• v.

1.1.9 - Ipinatupad ang konteksto ng DOM node inspeksyon sa loob ng mga iframe at shadowDOM.

Ngayon ang extension ay gumagana din sa mga lokal na file (file:/// scheme).

• v.

1.1.8 - Nagdagdag ng babala kapag nagbago ang pahina, suporta para sa shadow DOM at mga pangunahing setting.

• v.

1.1.7 - Maliit na pag-aayos ng istilo.

Ngayon ay magagamit na rin ito sa Firefox dahil sa ilang maliit na pagbabago sa code.

Nilinis ang code.

• v.

1.1.5 - Inayos ang bug na nauugnay sa paglipat ng mga module ng css (hindi naka-istilong spinner).

• v.

1.1.4 - Nagdagdag ng madilim na tema (dati ay hindi ito magagamit kapag naka-on ang madilim na tema).

• v.

1.1.3 - Nakapirming bug sa page navigation.

• v.

1.1.2 - Nagdagdag ng suporta para sa mga iframe na walang attribute na "src" (maaaring gumana ang ilang iframe na may "src", ngunit hindi ito dapat asahan).

Gayundin, ang tagapagpahiwatig ng pag-load ay ipinakilala din sa sidebar (panel ng mga elemento), at ang sidebar ay mayroon na ngayong sariling "refresh contexts" na buton.

• v.

1.1.1 - Inayos ang bug kung saan ang mga static na konteksto na ginawa ng kanilang magulang ay may display flex o grid kung saan hindi natukoy.

• v.

1.1.0 - Ngayon gumagana ang extension sa mga tab na nakabukas na noong na-install ito.

- Ang right-click na menu ng konteksto ay pinalitan ng mga button na ayon sa konteksto, dahil hindi ito gumagana nang tama (maaari itong idagdag muli sa hinaharap).

- Ngayon ang pahina ng context tree ay magpapakita ng tagapagpahiwatig ng paglo-load kapag ang konteksto ng pagsasalansan ay tumatagal ng mahabang oras upang mag-load.

- Sa panig ng developer, ang lahat ng code ay inilipat upang isagawa, bilang unang hakbang upang gawin itong open source.

• v.

1.0.1 - Maliit na pagbabago sa pagiging naa-access at mga visual na tweak.

Karagdagang impormasyon:

- Inaalok ni Andrea Dragotta
- Average na rating : 3.92 star (nagustuhan ito)
- Developer Ang e-mail address ay protektado mula sa spambots. Kailangan mo enable ang JavaScript upang tingnan ito.

CSS Stacking Context inspector web extension isinama sa OffiDocs Chromium online