de Craig Fitzpatrick

Cum să profitați de puterea inspectorului web modern

Fiara mică, la îndemână (alias Inspectorul Web) a parcurs cu siguranță un drum lung din zilele „vizualizării sursei”!

Pentru cei dintre voi care sunt prea tineri pentru a-și aminti – în vremurile preistorice ale dezvoltării site-ului web, comanda „view source” pur și simplu a deschis codul HTML al unei pagini în Notepad-ul Windows. Nu a fost grozav.

Cum sa profitati de puterea inspectorului web modern
1611288126 707 Cum sa profitati de puterea inspectorului web modern

Rapid până astăzi, avem …

… reguli CSS modificabile cu selectoare de culoare încorporate …

1611288126 299 Cum sa profitati de puterea inspectorului web modern

… capacitatea de a împinge valorile pixelilor cu tastatura, provocând mișcarea în timp real a conținutului dvs. …

Cum sa profitati de puterea inspectorului web modern

… Și cea mai mare invenție dintre toate: „look-forward”, care completează automat numele și valorile CSS pe măsură ce tastați. Acest lucru vă economisește ore de depanare cauzate de propria dvs. ortografie oribilă:

1611288128 210 Cum sa profitati de puterea inspectorului web modern

Mulți dezvoltatori nici măcar nu au descoperit toate micile bucăți de uimire încorporate în majoritatea inspectorilor web.

De exemplu, Știați că puteți construi o pagină HTML întreagă în Inspector?

Doar deschideți o filă nouă și Inspector (veți vedea probabil o pagină de căutare Google sau ceva ca implicit) și începeți să ștergeți nodurile chiar din inspectorul DOM. După ce ați ajuns la nodul HTML, faceți clic dreapta și alegeți EDITARE CA HTML.

1611288129 818 Cum sa profitati de puterea inspectorului web modern

Construiți-vă pagina de la zero cu o previzualizare automată în timp real a lucrării dvs. în cadrul browserului de mai sus! Puteți chiar să glisați și să fixați noduri HTML în interiorul inspectorului pentru a muta lucrurile în jur.

Nu mă ajuta nici măcar să mă gândesc la cât de uimitoare este consola JavaScript pentru inspectarea memoriei, mersul în sus și în jos în stivă și multe altele.

Este o zi minunată să fii dezvoltator web!

Dar

Dar există doar un mic sughiț. Salvarea muncii dvs. are numai recent pus la dispoziție și este puțin cam ciudat… Trebuie să:

  • deschideți navigatorul și selectați suprascrieri
  • activați suprascrierea locală
  • faceți clic dreapta pe fișierul CSS și salvați pentru suprascrieri

Sigur … Există o tehnologie destul de puternică aici, dar cum puteți recupera rapid modificările pe site-ul dvs. de producție? Ugh. Atât de aproape de perfecțiune!

PageCloud

Când scriam prima versiune a PageCloud, acesta a fost unul dintre lucrurile din mintea mea.

Chiar dacă PageCloud este un constructor de site-uri vizuale care ajută persoanele non-tech să construiască pagini web, m-am gândit: inspectorul DOM este un instrument atât de puternic, nu ar fi grozav dacă ați putea face pur și simplu unele modificări și le-ați trimite imediat în nor?

Așa că am plecat într-o misiune de a oferi dezvoltatorilor posibilitatea de a utiliza Inspectorul Web pentru a edita un site de producție.

Cu toate acestea, singura modalitate de a realiza acest lucru a fost să faceți un pas înapoi și să regândiți modul în care paginile web sunt construite, gestionate și servite.

1611288129 388 Cum sa profitati de puterea inspectorului web modern

Au existat o mulțime de provocări tehnice, cum ar fi servere de aplicații, șabloane, cuibărire, baze de date, cache-uri …

Așa că am decis să scot o pagină din manualul de autoeditare. Ideea a fost simplă: lansați o aplicație pentru a putea citi, edita și crea documente. Odată ce ați apăsat Salvare, toate modificările dvs. se blocează.

Așa că m-am întrebat:

Ce se întâmplă dacă am considera pur și simplu paginile web ca documente?

Nu vă voi plictisi cu luptele de a face acest lucru să funcționeze efectiv (și cu câteva sticle de vin care au ajutat la calmarea durerii), dar această idee inițială a fost fundamentul pentru tot ceea ce este astăzi PageCloud. Și, până acum, suntem singurii care o fac.

Bazându-ne pe acest concept, am putut permite utilizatorilor să interacționeze cu web în același mod ca și în cazul aplicațiilor desktop: cum ar fi copierea / lipirea din clipboard, stratificarea, redimensionarea și mișcarea obiectelor liber pe pagină.

Aceeași idee ne-a permis să ne integrăm cu Web Inspector, permițând utilizatorilor să modifice orice, să apese pe Salvare și să se termine.

Iată un exemplu rapid:

1611288130 901 Cum sa profitati de puterea inspectorului web modern

Profitând de toată frumusețea inspectorului web modern, puteți: edita HTML, CSS și crea link-uri către CSS și JS externe. Puteți rula chiar comenzi în consola JavaScript pentru a modifica DOM!

Orice mijloc prin care puteți modifica acel DOM este un joc corect. Când „SALVAȚI”, toate modificările dvs. sunt persistente și trimise înapoi în cloud – deoarece pagina dvs. este un document, la urma urmei!

Cum sa profitati de puterea inspectorului web modern

Datorită magiei inspectorului web, puteți chiar să copiați noduri dintr-o fereastră de browser și să le lipiți în DOM-ul altei pagini.

Da, suntem ambițioși. Dar credem că acest nou mod de gândire va permite PageCloud să devină primul instrument care îndeplinește nevoile proiectantului vizual, menținând în același timp accesul nerestricționat pentru dezvoltatori.

Poate că într-o zi într-un viitor nu atât de îndepărtat, „Inspect” va fi înlocuit de o interfață ușor de utilizat și se va alătura „vizualizării sursei” în rândurile celor învechite. Adică, dacă PageCloud are legătură cu asta!