Útmutató a Google webes eszközeihez

Sep 12, 2025
kézikönyv

A Big G, az AKA Google, a fejlesztők számára a webes tervezés egyszerűvé tétele. Ebben a cikkben átmegyünk a legjobb Google Eszközökön, és megmutatjuk, hogyan kell használni őket a webdesign és a fejlesztési munkafolyamatban.

Egy különböző tartományt lefedünk Webes tervezési eszközök Itt, ezért felosztottuk a tartalmat az oldalakba, hogy megkönnyítsék a navigálást. Használja a fenti legördülő menüt, hogy ugorjon az érdeklődő részre. Szeretné megtervezni a webhelyet egy másik szolgáltatóval? Útmutatóink web hosting és a felső weboldal építője fedezte.

Mindaddig, amíg a weboldalak nem minősülnek, tartalmukat bárki megtekintheti. A Chrome Devtools teszi ezt az egyszerűen - ezen az oldalon, megmutatjuk, hogyan nézheti meg és módosíthatja a HTML, CSS és JavaScript gombot. Tovább 2. oldal , közelebbről megvizsgáljuk, hogyan kell használni a Google hibakeresőjét, hogy gyorsan és egyszerűen javítsa a kódolási hibákat. 3. oldal A reflektorfényt a Google eszköz üzemmódra helyezi, amelyet az oldalak mobil verzióinak tesztelésére használhat az asztali gépen keresztül. Tovább Page 4 Bemutatjuk az alapokat, amellyel tudnia kell, hogy elkezdje végrehajtani az anyagi tervezési elveket a tervekben. Végül, 5. oldal Nézd meg a progresszív webes alkalmazások, a legfrissebb nagy dolog az internetes tervezési iparban.

A HTML, a CSS & amp megtekintése és módosítása; Js

Mindaddig, amíg a weboldal kódja nem minimalizált, a Chrome fejlesztői eszközeit használó bárki megtekinthető. Először is ellenőrizze a Chrome verzióját - a következő lépések működnek a 70.0.3538.67 verzióban, amely egy 64 bites Ubuntu munkaállomáson fut. Ezután nyissa meg a Hamburger menüt, és kattintson a További eszközök & gt; Fejlesztői eszközök.

Launch Google's Developer Tools

Indítsa el a fejlesztői eszközöket, és látnia kell egy ehhez hasonló képernyőt [kattintson az ikonra a jobb felső sarokban]

A böngésző egy ablaktáblát nyitva reagál a képernyő bal oldalán. Az első lépésben kell átmérni - alapértelmezés szerint a böngésző nem hozzárendel elegendő képernyős ingatlant. Ha elkészült, a képernyő hasonlít a fent látható képen látható.

Alapértelmezés szerint a fejlesztői eszközök elindulnak a konzol lap betöltésével. A konzol-naplózási funkció behívása által kibocsátott kimenetet tartalmazza. A hibák megjelenítése is ott jelenik meg - ha piros vonalakat találsz, valami rossz a jelölés vagy az oldal kódja. A jobb oldali oldalon lévő kis "URL" gombra kattintva a vonalat hozza meg, amely az üzenet megjelenését okozza.

Ellenőrizze a jelölést

Ha az Ön érdeklődése a jelölésre összpontosít, használja az ábrán látható elemeket. Ez megmutatja, hogy a Jelölje meg a böngészőt jelenleg. A fa nézethez hasonló módon bővítheti és kompaktizálhatja - elrejtheti a szükségtelen elemeket, hogy megakadályozza az érzékszervi túlterhelést.

A létjogosultság A fül a CSS struktúra kijelzője. A különböző forrásokból származó CSS-k összegyűjtése, amelyek szépen és egymás mellett jelennek meg. Az ábrán látható példa esetében látjuk, hogy a stílusokat mind a "div" címke, mind az oldal "fő" jelölésére szolgáltatták.

A Chrome lehetővé teszi, hogy a legtöbb attribútumot szerkeszthesse. Kattintson duplán a fekete szövegek bármelyikére, hogy átalakítsa a címkét egy szerkesztőbe, majd írja be az újonnan kívánt értéket, és nyomja meg a visszatérési gombot. A renderelő felveszi ezeket a változtatásokat, és alkalmazza őket a DOM-ra. Ez különösen hasznos, ha megpróbálja optimalizálni a színeket vagy az elhelyezési problémákat; Az oldal újratöltése, hogy az előnézeti változtatásokat fárasztóvá váljon.

Google's web tools

A sárga háttér azt jelzi, hogy az ablak tartalma szűrésnek van kitéve [kattintson az ikonra a jobb felső sarokban]

Végül nézze meg a táblán lévő szövegmezőt. Ez lehetővé teszi, hogy kiszűrje a jelölő elem látható: például írja be a „MDC”, hogy korlátozza a céllal, hogy minden stílus örökölt Material Design könyvtár használni később ebben a cikkben. Ha egy szűrő aktív, sárga háttér jelenik meg a fent említett divatban.

Végezzen részletes elemzést

A modern webböngészőkben a DOM nem korlátozódik a "statikai" prezentációs kérdésekre. Ez szabályozza az eseményáramlást és az elhelyezéseket is. Váltson a számított fülre, hogy feltárja a "Dimenziós" tulajdonságok listáját. Ez hihetetlenül hasznos, ha pontos módon a képernyőn lévő widgeteket rendezi.

Az Esemény-hallgatók fülre való áttérés áttekintést nyújt az eseményáramlásokról. Ezzel a funkcióval gyorsan kigyomlálja kapcsolatos problémák felhasználói interakció: ha egy esemény nem ravaszt, elindul ellenőrzi a eseménykezelő kapcsolatokat.

Végül a Tulajdonságok ablak lehetővé teszi, hogy megnézze az egyes dom csomópontokon belül tárolt attribútumokat. Ha valaha is sok időt töltöttél a Dom-Manipuling kódot, az érték egyértelmű.

Következő oldal: Hogyan kell használni a Google hibakeresőjét

  • 1
  • 2
  • Három
  • 4
  • 5

Aktuális oldal: A HTML, a CSS & amp megtekintése és módosítása; Js

kézikönyv - Most Popular Articles

A gravitációs vázlat használata

kézikönyv Sep 12, 2025

(Kép hitel: gravitációs vázlat) Gravitációs vázlat, a VR-hirdetések tervezési és modellező eszköze továb..

Kezelés React Form állapot formájával

kézikönyv Sep 12, 2025

(Kép hitel: Matt Crouch) Üdvözöljük az útmutatóban, hogyan kell kezelni a reagálási forma állapotot a Formi..

Az UI animációk hozzáadása a webhelyére

kézikönyv Sep 12, 2025

A legtöbb ember naponta látja a felhasználói felületeket, függetlenül attól, hogy van-e egy mobilalkalmazásban vagy egy ..

Szétszóró fák v-ray-vel

kézikönyv Sep 12, 2025

Részletek hozzáadása a jelenet mindig az a mód, hogy menjen, ha szeretné elérni a realizmust az Önben 3D Art ..

Slick UI animációk létrehozása

kézikönyv Sep 12, 2025

Egyre gyakrabban a tervezők és a fejlesztők elismerik a mozgás kialakításának fontosságát a felhasználói tapas..

Textúra egy hitelesen viselt K-2SO Droid

kézikönyv Sep 12, 2025

Page 1 of 2: 1 oldal 1 oldal 2. oldal ..

Hogyan kell használni a keverékformákat a karakterek animálásához

kézikönyv Sep 12, 2025

Míg a kötélzet 3D modellek A csontok használata nagyon hatékony lehet, néha ez a módszer csak nem alkalmas - és az arckifejezések az egyik ilyen idő. Eh..

Hozzon létre játékkész textúrákat az anyagfestővel

kézikönyv Sep 12, 2025

Ez az elmúlt év egy játékváltó volt a videojáték-iparág számára, és az amerikai művészek elég szerencsések ahhoz,..

Kategóriák