Ihøne blev jeg starter ud som en web-udvikler, Jeg var nødt til at stå over for nogle kampe, når at finde løsninger på nogle af mine problemer. Jeg var nødt til at lære og prøve nye ting, men der var ikke så mange tutorials, som der er i dag. Det bedste alternativ var at lære og studere fra andres arbejde, analysere deres proces og arbejdsformer.
Disse dage, det virker som en ny tutorial vises hvert minut, men jeg personligt tror, ​​at se på faktisk gennemførte løsninger er stadig en kraftfuld måde at lære, og du har også mange værktøjer og metoder til din rådighed, som kan hjælpe dig med at se og finde ud af, hvordan dine foretrukne hjemmesider blev bygget. Alt du behøver at vide og lære, er lige foran dig og til din rådighed.
Web Development Tools og udvidelser
Den traditionelle se kildekoden mulighed var ikke nok for en god kode inspektion. Det blev meget vigtigt for en web-udvikler til at have en værktøjskasse, der kunne give ham et sæt af muligheder specielt lavet til kode, analyse og inspektion inden for en web-browser. Disse værktøjer kaldes Developer Tools og er som regel installeret som standard eller som en udvidelse / plugin, arbejder direkte fra selve browseren. Med de udviklingsværktøjer kan du se alle kildekoden til en webside, som du gjorde før med den traditionelleSe Source Code mulighed, men med måde flere valgmuligheder og funktioner, end før. Du kan inspicere, redigere, se live resultater og meget mere.
Google Chrome (Developer Tools) / Safari (Udviklingsværktøjer)

Du kan være undrende, hvorfor jeg bl.a. Chrome Developer Tools og Safari Developer Tools sammen, godt det er, fordi de hører sammen. De Developer Tools er en del af Webkit open source projekt, hvilket betyder, Safari og Google Chrome deler den samme kodebase, de selv samme layout.
SÃ¥ lad os starte med Chrome, min nye favorit. Googles Chrome har Developer Tools er meget ny sammenlignet med andre som Firebug (Firefox), men det vokser hurtigt og bliver bedre og bedre med hver ny version.
Det samme gælder selvfølgelig for Safari.
"Google Chrome Developer Tools skabe et integreret miljø for fejlsøgning, optimering, og forstå en web-applikation, eller hjemmeside, kører i Google Chrome. De udviklingsværktøjer er udviklet dels gennem WebKit open source-projekt, Såfremt værktøjerne er kaldt Web Inspector ".
"Alle Safari magtfulde udviklingsværktøjer er let tilgængelige fra udvik-menuen. Den Udvikle menu indeholder et væld af værktøjer, som du kan bruge til webside manipulation og debugging. "
For en bedre forståelse, kan du tjekke nedenstående links.
Google Chrome Developer Tools
Safari Developer Tools
Firefox (Firebug)

Med Firefox den smarte løsning til en web-udvikler er afgjortFirebug, en af ​​de mest populære Firefox-udvidelser derude. Selv om WebkitUdviklingsværktøjer vokser på en virkelig hurtig tempo, Firebug er nok den mest komplette og modne værktøj, du kan have for webudvikling og kodeanalyse.
"Firebug integreres med Firefox at sætte et væld af webudviklingsværktøjer ved hånden, mens du surfer. Du kan redigere, debug, og skærm CSS, HTML, og JavaScript bor i enhver webside. "
Firebug'S interface og arbejdsproces er meget lig ChromesUdviklingsværktøjer (eller vice-versa).
Firebug
Opera (Opera Dragonfly)

Dette er Operas perle for kode analyse og inspektion. Det er overraskende kraftfuld og personligt ville jeg sætte det i tredje sted lige bag Google Chrome har Developer Tools. Ulempen er afgjort æstetik, men dens funktioner og på tværs af enhedskompatibilitet steder Dragonfly blandt de bedste.
"En fuld suite af værktøjer er klar til din rådighed. Debug JavaScript, se DOM, overvåge netværkstrafik, gennemse ressourcer, redigere farver og en hel masse mere. Hvis du er en udvikler, eller en designer, Opera Dragonfly har værktøjerne til at holde dig dækket. "
For mere information, tjekke nedenstående link.
Opera Dragonly
Internet Explorer (Udviklingsværktøjer)

Ja, Internet Explorer har en alt for. Selv interfacet ser en smule gammeldags, og ikke så god som andre løsninger, da det mangler nogle funktioner, det kan værenæsten så godt som konkurrencen.
"Microsoft Internet Explorer Developer Toolbar indeholder en række værktøjer til hurtigt at oprette, forståelse, og fejlfinding websider. "
Du kan lære mere om det på nedenstående link.
Internet Explorer Developer Toolbar
SÃ¥dan
Kontroller en hjemmeside font

Med real tekst (ikke et billede af tekst), den første og nemmeste måde er ved hjælp Developer Tools / Firebug, så hvis du har det bare markere teksten, inspicere element, og du bør straks se på højre side af er eller font-family ejendom, som fortæller dig den skrifttype, der bliver brugt. En anden måde at gøre det på er ved hjælp af en udvidelse / plugin til dette formål. Der er sandsynligvis lignende plugins til andre browsere som Chrome, men hvis du bruger Firefox, du har en stor add-on kaldetContext Font. Med Context Font alt hvad du behøver gøre er at markere teksten (igen, behov for at være rigtig tekst og ikke et billede), højreklikke på den og du vil straks få den skrifttype og størrelse bruges.
Hvis den skrifttype, du leder efter bliver brugt som et billede, du har kun én måde at gøre det. En af de mange steder, du kan gøre dette på er myfonts.com. Upload din skrifttype og følg trinene.
Held og lykke!
Marker afkrydsningsfeltet model af et element

Boksen model repræsenterer den visuelle opbygning af elementerne i en webside ved hjælp af de tilsvarende egenskaber som bredde, højde, margin, polstring og grænsekontrol,ifølgevisuel formatering model. Det er muligt at markere feltet model af hvilken som helst side, og element ved hjælp Developer Tools eller Firebug. For at gøre det, du skal bare at inspicere det ønskede element, og vælgMetrics på højre side af Developer Tools panelet. Med Firebug, skal du vælge Layout (ikke Metrics).
Kopier al tekst indholdet af et element med Udviklingsværktøjer

Denne er en populær trick som opnås ved anvendelse af Udviklingsværktøjer konsollen. Så lad os sige, du ønsker at kopiere denne artikel tekst uden behov for at skulle vælge alt indholdet med markøren (især nyttigt på meget lange sider med for meget tekst). For at gøre dette, inspicere ethvert element på denne artikel side og kigge efter teksten containeren navn, som du ønsker at kopiere teksten (som i dette tilfælde kaldes articlesContainer), nu gå til console og skrive følgende kommando: kopiere (articlesContainer.innerText ). Nu indsætte teksten hvor du ønsker, og du er færdig! Du har lige kopieret teksten inde i vores articlesContainer hvilket svarer til vores vigtigste artiklens tekst.
Bookmarklets
Min

MIN er en bookmarklet der vil fjerne ethvert indretning fra en lokalitet. Alle farver, kanter og baggrunde er fjernet med det samme, hjælpe dig med at identificere de vellykkede og mislykkede anvendelser af typografi og layout.
Websted
Design

Design er en suite af web-design og udvikling hjælpemidler værktøjer, som kan udnyttes på en web-side. Samfundsomspændende værktøjer til gitterlayout, måling og justering, Design er en unik stærk JavaScript bookmarklet.
Websted
Favelet Suite

Når den aktiveres, en div element vises i øverste venstre hjørne af din browser vindue med en liste over alle de favelets medfølger. Du skal blot klikke på linket, du ønsker at påberåbe sig favelet. En "info" ikonet er til rådighed til at tage dig til favelets informationsside om slayeroffice. Inkluderet i pakken: Color List, Dokument Tree figur *, HTML data Viewer, HTTP Header Viewer, Skjult felt, Skift, JavaScript Object Tree *, MODIv2, Mouseover DOM, Inspector, Objekt Dimensioner, Side Info, Fjern Børn, Tilpas skrifttyper, Lineal **, Vis Source, Style Sheet Tweak *, Style Sheet Viewer *.
Websted
W3C Markup Validator

Hurtige opmærkningskommentarer valideringer af enhver webdokument.
Websted


| Original indhold her er udgivet under disse licensvilkår: | X |
|
| Licenstype: | Ikke-kommerciel, Attribution, Ingen bearbejdelser arbejde | |
|
| Licens Oversigt: | Du kan kopiere dette indhold, og genudgive den i uændret form for ikke-kommercielle formål, forudsat at du inkluderer en åbenlys tilhørsforhold til forfatteren(s). Du er ikke tilladt at oprette afledte værker. |
|
| Licens URL: | http://creativecommons.org/licenses/by-nc-nd/3.0/ |