Användarhandbok Avbryt

Skriv och redigera kod

Sök

Senast uppdaterad den 2 maj 2021

Dreamweaver

Öppna appen

Lär dig hur du arbetar i kodvyn och utnyttjar kodningsfunktionerna i Dreamweaver på bästa sätt.

Du kan arbeta med kod i Dreamweaver på flera olika sätt.

Du kan öppna en ny kodfil via dialogrutan Nytt dokument och bara börja skriva in din kod.

När du skriver visas kodtips som hjälper dig att välja kod och undvika stavfel. Få hjälp med CSS när du behöver det via Dreamweavers användbara Snabbdokument.

Du kan också infoga kod via panelen Infoga eller använda kortkommandon för kod, som Emmet-förkortningar.

Om du märker att du ofta kopierar och klistrar in samma kodavsnitt kan du prova de här tidsbesparande funktionerna:

Panelen Kodfragment är praktisk när du snabbt vill skapa och infoga förformaterade kodavsnitt i din kod.
Flera markörer gör att du kan skapa och redigera flera kodrader på en gång.

Dreamweaver innehåller också en uppsättning kraftfulla redigeringsverktyg som gör att du lätt kan navigera och göra ändringar i koden.

Använd Dreamweavers funktion sök och ersätt för att söka efter taggar, attribut och text i kod.
Använd kodnavigatören för att navigera till relaterad kod både inuti och utanför den aktuella filen. Och använder du funktionen Snabbredigering kan du redigera kod i relaterade filer utan att behöva öppna filen i en ny flik.
Högerklicka på koden så visas en enkel, relevant snabbmeny där du kan redigera koden direkt.
Använd Radbryt tagg för att omsluta text inom taggar.

Läs vidare och få mer information om alla de här kodningsfunktionerna.

Infoga kod med hjälp av panelen Infoga

Placera insättningspunkten i koden.
Välj lämplig kategori på panelen Infoga.
Klicka på en knapp på panelen Infoga eller välj ett objekt på snabbmenyn på panelen Infoga.

När du klickar på en ikon visas koden på sidan direkt eller så visas en dialogruta där du ombeds lämna mer information för att slutföra koden.

Antalet och typen av knappar som finns på panelen Infoga varierar beroende på dokumenttypen. Det beror också på om du använder kodvyn eller designvyn.

Använda Emmet-verktygen med Dreamweaver

Emmet är ett plugin-program som gör att du kan programmera och generera HTML- och CSS-kod snabbt.

Använd Emmet-förkortningar i kodvyn eller kodpanelen i Dreamweaver och tryck på Tabb för att utöka dessa förkortningar till HTML-kod eller CSS.

HTML-förkortningar utökas på HTML- och PHP-sidor. CSS-förkortningar utökas på CSS-, LESS- SASS- och SCSS-sidor eller i style-taggen på en HTML-sida.

Här är några exempel som visar hur du kan använda Emmet-förkortningar i kodvyn. Mer information och referenser finns i Emmet-dokumentationen.

Obs!

För tillfället stöds Emmet 1.2.2-förkortningar i Dreamweaver.

Exempel 1: Infoga HTML-kod med Emmet

Du kan snabbt lägga till HTML-kod för en osorterad lista med tre element genom att öppna HTML-filen och skriva följande Emmet-förkortning i kodvyn i <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Se till att markören är placerad direkt efter Emmet-förkortningen och tryck på Tabb för att utöka förkortningen. Du kan också markera hela förkortningen och sedan trycka på Retur.

Förkortningen utökas till följande kod:

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

Exempel 2: Infoga CSS-kod med Emmet

Du kan infoga CSS-kod för att skapa kantradie med leverantörsprefix genom att öppna din CSS-fil och skriva följande Emmet-förkortning i en klass:

-bdrs

När du trycker på Tabb utökas förkortningen till följande kod:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

Arbeta med kodkommentarer

En kommentar är beskrivande text som du infogar i HTML-kod för att förklara koden eller tillhandahålla annan information. Texten i kommentaren visas endast i kodvyn och visas inte i en webbläsare.

Lägga till kommentarer i din kod

Om du vill lägga till kommentarer skriver du först kommentarstexten. Du kan sedan placera markören vid insättningspunkten och klicka på ikonen Infoga i verktygsfältet så öppnas undermenyn Lägg till kommentar.

Du kan också markera texten och göra den till en kommentar. Den markerade texten radbryts i ett kommentarblock.

Du kan lägga till kommentarer genom olika syntaxalternativ. Välj rätt syntax så infogar Dreamweaver taggarna åt dig. Allt du behöver göra är att ange kommentarstexten.

Du kan också använda kortkommandona Ctrl+/ (Windows) eller för Cmd+/ (Mac) för att lägga till kommentarer.

Om du använder kortkommandot utan att markera någon text, används kommentaren för den aktuella raden. Om du markerar text och använder kortkommandot, används kommentaren för den markerade texten.

Ta bort kommentarer från kod

Om du vill ta bort kodkommentarer markerar du koden och klickar på ikonen Ta bort kommentar i verktygsfältet. Du kan också använda kortkommandona Ctrl-/ (Windows) eller för Cmd-/ (Mac) för att ta bort kommentarer.

Växla mellan kodkommentarer

Om du vill växla mellan att visa och dölja kommentarer i kodvyn trycker du bara på Ctrl+/ (Windows) eller Cmd+/ (Mac) för den markerade kommentaren eller raden.

Använda flera markörer för att lägga till eller ändra text på flera ställen

Lägg till markörer på flera ställen eller markera flera kodavsnitt och redigera dem samtidigt med hjälp av Dreamweavers funktion för flera markörer.

Obs!

Det går inte att göra kopiera och klistra in och sök och ersätt ihop med flera markörer eller flera markeringar.

Lägga till flera markörer eller flera markeringar

Du kan lägga till flera markörer på olika sätt beroende på dina behov.

Om du vill lägga till samma text på flera ställen utan att ersätta befintlig text, lägger du till flera markörer.

Om du vill ersätta befintlig text kan du göra flera markeringar. Du kan markera sammanhängande textrader eller textrader som inte hänger samman eller båda typerna och lägga till markörer i dem.

Så här lägger du till flera markörer eller flera markeringar i samma kolumn över sammanhängande rader:

Håll ned Alt-tangenten och klicka sedan och dra lodrätt. När du drar lodrätt läggs markörer till i varje rad du drar över.

Text som lagts till vid markörer på flera rader

Tryck på Alt-tangenten och dra diagonalt om du vill markera sammanhängande textrader. När du drar diagonalt markerar Dreamweaver ett rektangulärt textblock i den markeringen.

Markera och uppdatera flera textrader samtidigt

Obs!

Om du snabbt vill lägga till markörer eller infoga flera rader i en markering, använder du kortkommandot Skift-Alt-Uppil eller Nedpil.

När du har lagt till markörerna (eller markerat text) på flera ställen kan du börja skriva.

Om du har flera markörer läggs ny text till.

Om du har markerat innehåll i flera textrader ersätts den markerade texten med den nya texten som du anger.

Så här lägger du till flera markörer i olika kolumner på flera rader:

Om du vill lägga till markörer i osammanhängande textrader trycker du på Ctrl-tangenten och klickar på de olika rader där du vill placera markören.

Lägga till markörer i flera osammanhängande textrader

Om du vill markera osammanhängande textrader markerar du en del text och trycker sedan på Ctrl (Windows) eller Cmd (Mac) och fortsätter att göra fler markeringar.

Så här lägger du till markörer i början/slutet av varje rad:

Markera flera textrader och tryck på vänster eller höger piltangent.

Så här lägger du till markörer i föregående eller efterföljande rader för en markering:

Tryck på Skift+Alt+Uppil/Nedpil och tryck sedan på höger piltangent.

Så här markerar du sammanhängande och osammanhängande textrader:

Du kan kombinera de här teknikerna och markera både sammanhängande och separata textrader i en enda markering.

Först markerar du de osammanhängande textraderna och sedan trycker du på Ctrl-Alt (Windows) eller Cmd-Alt (Mac) och drar för att lägga till en uppsättning rader till de befintliga markeringarna.

Markera både sammanhängande och osammanhängande textrader

Få hjälp med CSS i Dreamweaver via Snabbdokument

När du arbetar med CSS-, LESS- eller SCSS-filer i Dreamweaver kan du snabbt få mer information om CSS-egenskaper och värden.

Placera markören i en egenskap eller ett värde och tryck på Ctrl + K så öppnar Dreamweaver dokumentation från Web Platform Docs-projektet.

Du kan öppna flera inline-redigerare och dokumentvisningsprogram samtidigt.

Om du vill stänga en inline-redigerare eller ett dokumentvisningsprogram klickar du på ”X” i det övre vänstra hörnet eller trycker på Esc när Snabbdokument är i fokus.

Om du vill stänga alla inline-redigerare och dokumentvisningsprogram placerar du markören i den omgivande kodredigeraren och trycker på Esc.

Analysera kod

Dreamweaver har stöd för linting (kodgranskning för att se om det finns eventuella fel) för HTML, CSS och JavaScript.

Fel och varningar som upptäcks av linting visas i panelen Utdata. Mer information finns i Granska kod.

I Dreamweaver visas dessutom en snabb felförhandsgranskning i kolumnen med radnummer i raden med fel. Radnumret visas i rött för att visa att den innehåller fel, och när du för markören över den visas en kort beskrivning av felet.

Obs! Endast det första felet i raden visas. Om raden bara innehåller en varning visas en beskrivning av varningen. Om raden innehåller en varning och ett fel visas en felbeskrivning.

Omslut text i kod med Radbryt tagg

Använd Radbryt tagg i kodvyn för att omsluta särskilda textrader med en tagg. I design- och Live-vyn kan du använda den här funktionen för att omsluta objekt med en tagg.

Markera text i kodvyn eller ett objekt i designvyn och tryck på Ctrl+T på tangentbordet.

En snabbmeny där du kan välja bland ett antal olika HTML-taggar visas.
Välj en tagg från menyn.

Om du arbetar i kodvyn omsluts den markerade texten med taggen. Om du arbetar i design- eller Live-vyn omsluts det markerade objektet med taggen.

Redigera kod med snabbmenyn Kodning

Använd Dreamweavers snabbmeny för att snabbt redigera kod.

Du öppnar snabbmenyn genom att högerklicka (Windows) eller Cmd-klicka (Mac). Följande alternativ är tillgängliga och kan användas:

Snabbredigering

Klicka på det här alternativet om du vill öppna snabbredigeringsläge. I det här läget tillhandahåller Dreamweaver sammanhangsberoende kodalternativ och interna verktyg som gör att du snabbt kan nå önskat kodavsnitt. Mer information finns i Snabbredigering.

Klipp ut, kopiera, klistra in

Klicka på de här alternativen om du snabbt vill klippa ut, kopiera och klistra in text utan att behöva öppna Redigera-menyn.

Sök och ersätt, Sök nästa, Sök föregående

Klicka på de här alternativen för att snabbt söka efter och ersätta text utan att behöva använda menyn Sök.

Skapa nytt kodfragment

Använd det här alternativet om du vill skapa kodfragment som du kan spara och återanvända. Markera koden och klicka på Skapa nytt kodfragment för att göra den markerade koden till ett fragment. Mer information finns i Arbeta med kodavsnitt.

Öppna relaterad fil

Högerklicka över en länk/skripttagg och klicka på en öppen relaterad fil så öppnas filen.

Koppla formatmall

Koppla en befintlig CSS-formatmall till sidan.

Komprimera markering

Undermenyn Markering innehåller olika kodredigeringsalternativ som du kan använda för ett markerat kodavsnitt, till exempel växla mellan rad- och blockkommentarer, visa och dölja markeringen, konvertera infogad CSS till regler, flytta CSS-regler och skriva ut kod.

Kodnavigatör

Klicka på det här alternativet för att navigera till relaterade kodkällor, till exempel interna och externa CSS-regler, SSI:er, externa JavaScript-filer, överordnade mallfiler, biblioteksfiler och iframe-källfiler. Mer information finns i Navigera till relaterad kod.

Kodtipsverktyg

Via undermenyn Kodtipsverktyg får du lätt tillgång till verktygen Färgväljaren, Hyperlänk och Typsnittslista.

Dra in kodblock

När du skriver och redigerar kod i kodvyn eller kodpanelen kan du ändra indragsnivån för ett markerat block eller en markerad rad med kod och flytta det till höger eller vänster med en tabb.

Dra in det markerade kodblocket

Tryck på Tabb eller
Tryck på Ctrl+] eller
Välj Redigera > Dra in kod.

Ångra indrag av det markerade kodblocket

Tryck på Skift+Tabb eller
Tryck på Ctrl+[ eller
Välj Redigera > Minska indrag på kod.

Navigera till relaterad kod

I kodnavigatören visas en lista med kodkällor som hör till en viss markering på sidan. Använd den för att navigera till relaterade kodkällor, till exempel interna och externa CSS-regler, SSI:er, externa JavaScript-filer, överordnade mallfiler, biblioteksfiler och iframe-källfiler. När du klickar på en länk i kodnavigatören öppnas filen som innehåller relevant kodavsnitt. Filen visas i området för relaterade filer, om det är aktiverat. Om du inte har aktiverat relaterade filer öppnas den valda filen som ett separat dokument i dokumentfönstret.

Om du klickar på en CSS-regel i kodnavigatören flyttas du direkt till den regeln. Om regeln är intern för filen visas regeln i den delade vyn. Om regeln finns i en extern CSS-fil öppnas filen och regeln visas i området för relaterade filer ovanför huvuddokumentet.

Du kan öppna kodnavigatören från design- och kodvyn, den delade vyn samt kodpanelen.

En demonstrationsvideo från Dreamweavers tekniker om hur du arbetar med kodnavigatören finns på www.adobe.com/go/dw10codenav.

En videofilm med en självstudiekurs om hur du arbetar med Live-vyn, relaterade filer och kodnavigatören finns på www.adobe.com/go/lrvid4044_dw.

Öppna kodnavigatören

Alt+klicka (Windows) eller Kommando+Alt+klicka (Macintosh) någonstans på sidan. I kodnavigatören visas länkar till koden som påverkar det område som du klickar i.

Klicka utanför kodnavigatören när du vill stänga den.

Obs!

Du kan också öppna kodnavigatören genom att klicka på indikatorn för kodnavigatören . Den här indikatorn visas nära insättningspunkten på sidan när musen har varit inaktiv i 2 sekunder.

Navigera till koden med kodnavigatören

Öppna kodnavigatören från området på sidan som du är intresserad av.
Klicka på det kodavsnitt som du vill flytta till.

I kodnavigatören grupperas relaterade kodkällor efter fil, och filerna visas i bokstavsordning. Anta att CSS-reglerna i tre externa filer påverkar markeringen i dokumentet. I så fall visar kodnavigatören dessa tre filer och de CSS-regler som är relevanta för markeringen. För CSS som gäller en given markering fungerar kodnavigatören på samma sätt som CSS-formatpanelen i Aktuellt läge.

Obs!

När du hovrar över länkar till CSS-regler visar kodnavigatören verktygstips för egenskaperna i regeln. Dessa tips är användbara när du vill se skillnad på olika regler som har samma namn.

Inaktivera indikatorn för kodnavigatören

Öppna kodnavigatören.
Markera Inaktivera indikatorn i det nedre vänstra hörnet.
Klicka utanför kodnavigatören när du vill stänga den.

Om du aktiverar indikatorn för kodnavigatören igen ska du Alt+klicka (Windows) eller Kommando+Alt+klicka (Macintosh) för att öppna kodnavigatören och sedan avmarkera alternativet Inaktivera indikatorn.

Gå till en JavaScript- eller VBScript-funktion

I kodvyn och kodpanelen kan du visa en lista med alla JavaScript- eller VBScript-funktioner i koden och gå till någon av dem.

Visa dokumentet i kodvyn (Visa > Kod) eller kodpanelen (Fönster > Kodpanelen).
Gör något av följande:
- Högerklicka (Windows) eller Ctrl-klicka (Macintosh) någonstans i kodvyn och välj undermenyn Funktioner på snabbmenyn.
Obs!

Undermenyn Funktioner visas inte i designvyn.

JavaScript- eller VBScript-funktioner i koden visas i undermenyn.

Obs!

Om du vill se funktionerna i alfabetisk ordning klickar du på Ctrl och högerklickar (Windows) eller klickar på Alt och Ctrl-klickar (Macintosh) i kodvyn och väljer sedan undermenyn Funktioner.
- Klicka på knappen Kodnavigering ({ }) i verktygsfältet i kodpanelen.
Välj ett funktionsnamn för att gå till funktionen i koden.

Extrahera JavaScript

JavaScript Extractor (JSE) tar bort alla eller de flesta JavaScript-skript från Dreamweaver-dokumentet, exporterar det till en extern fil och länkar den externa filen till dokumentet. JSE kan också ta bort händelsehanterare som onclick och onmouseover från koden och sedan bifoga det JavaScript som hör till dessa hanterare i dokumentet diskret.

Tänk på följande begränsningar i JavaScript Extractor innan du använder det:

JSE extraherar inte skripttaggar i dokumentets brödtext (utom när det gäller Spry-widgets). Det kan hända att du får ett oväntat resultat när du gör dessa skript externa. Som standard visas dessa skript i Dreamweaver-dialogrutan Gör JavaScript externt, men de markeras inte för extrahering. (Du kan markera dem manuellt om du vill.)
JSE extraherar inte JavaScript från ändringsbara områden i DWT-filer (Dreamweaver-mallar), icke ändringsbara områden i mallinstanser eller i Dreamweaver-biblioteksposter.
När du har extraherat JavaScript med alternativet Gör JavaScript externt och bifoga diskret kan du inte längre ändra Dreamweaver-beteenden på panelen Beteenden. I Dreamweaver kan du inte granska och fylla i panelen Beteenden med beteenden som har bifogats diskret.
Du kan inte ångra ändringarna när du väl har stängt sidan. Du kan emellertid ångra ändringarna så länge du arbetar i samma redigeringssession. Välj Redigera > Ångra Gör JavaScript externt om du vill ångra.
Vissa avancerade sidor kanske inte fungerar som förväntat. Var försiktig när du extraherar JavaScript från sidor med document.write() i brödtexten och globala variabler.

En demonstrationsvideo från Dreamweavers tekniker om JavaScript-stödet i Dreamweaver finns på www.adobe.com/go/dw10javascript.

Så här använder du JavaScript Extractor:

Öppna en sida som innehåller JavaScript.
Klicka på Verktyg > Gör JavaScript externt.
Ändra standardvalen i dialogrutan Gör JavaScript externt, om det behövs.
- Välj Gör endast JavaScript externt om du vill att Dreamweaver ska flytta all JavaScript till en extern fil, och referera till den filen i det aktuella dokumentet. Det här alternativet lämnar kvar händelsehanterare som onclick och onload i dokumentet, och visar beteenden på panelen Beteenden.
- Välj Gör JavaScript externt och bifoga diskret om du vill att Dreamweaver ska 1) flytta JavaScript till en extern fil och referera till den i det aktuella dokumentet och 2) ta bort händelsehanterare från HTML-koden och infoga dem under körning med hjälp av JavaScript. När du väljer det här alternativet kan du inte längre ändra beteenden på panelen Beteenden.
- Avmarkera alla ändringar som du inte vill göra i kolumnen Redigera, eller markera ändringarna som inte har markerats automatiskt.
  I Dreamweaver visas som standard följande ändringar medan de markeras inte:
  
  Skriptblock i huvudet på dokumentet som innehåller anropen document.write() eller document.writeln().
  
  Skriptblock i huvudet på dokumentet som innehåller funktionssignaturer som hör till EOLAS-hanteringskoden, som använder document.write().
  
  Skriptblock i dokumentets brödtext, såvida inte blocken bara innehåller konstruktorer för Spry-widget eller Spry-datauppsättningar.
- Dreamweaver tilldelar automatiskt ID:n till element som inte redan har ID:n. Om du inte vill ha dessa ID:n kan du ändra dem genom att redigera ID-textrutorna.
Klicka på OK.

Sammanfattningsdialogrutan innehåller en sammanfattning av extraheringarna. Granska extraheringarna och klicka på OK.
Spara sidan.

Dreamweaver skapar filen SpryDOMUtils.js och ytterligare en fil som innehåller extraherat JavaScript. Dreamweaver sparar filen SpryDOMUtils.js i en SpryAssets-mapp på platsen, och sparar den andra filen på samma nivå som sidan som du extraherade JavaScript från. Glöm inte att överföra båda dessa beroende filer till webbservern när du överför originalsidan.

Snabbredigering

Med snabbredigeringsläget i Dreamweaver får du sammanhangsberoende kodalternativ och interna verktyg som gör att du snabbt kan nå önskat kodavsnitt, och du slipper att få en rörig kodningsmiljö med många paneler och ikoner.

Du kan öppna snabbredigeringsläge genom att:

Högerklicka på ett kodfragment och välja snabbredigering på snabbmenyn som visas
Trycka på Ctrl+E (Windows) eller Cmd+E (Mac)

Använda snabbredigeringsläge med HTML-filer

Placera markören i ett klass- eller ID-attribut (namn eller värde) eller i taggnamnet i en HTML-fil. Snabbredigeringen visar alla CSS-, SCSS- och LESS-regler i ditt projekt som matchar. Du kan redigera de här reglerna direkt utan att behöva lämna kontexten i HTML-filen.

Om det finns flera regler som matchar kan du navigera bland dem med hjälp av listan till höger (eller använda Alt-Uppil/Nedpil).

Om du vill skapa en CSS-regel direkt från inline-redigeraren klickar du på Ny regel eller trycker på Ctrl-Alt-N (Windows) eller Cmd-Alt-N (Mac).

Använda snabbredigeringsläge med JavaScript-filer

Placera markören på ett funktionsnamn i en JavaScript-fil. Snabbredigeringen visar funktionens innehåll (även om det finns i andra filer som refereras till av en require()-sats).

Använda snabbredigeringsläge med CSS-, SCSS- eller LESS-filer

När du öppnar snabbredigering och placerar markören i ett färgvärde får du tillgång till färgväljaren och kan snabbt ändra de färger som används i CSS-koden.

Få tillgång till färgväljaren i en CSS-fil

Placera markören på en timingfunktion för övergång, som cubic-bezier() eller steps(), i en CSS-, LESS- eller SCSS-fil så visar Snabbredigering en kurvredigerare för grafisk övergång.

De fördefinierade timingfunktionerna ease, ease-in, ease-out, ease-in-out, step-start och step-end är också giltiga startpunkter.

Ändra en Bezier-kurva med snabbredigering

Omstrukturering av kod

Omstrukturering av kod är processen där befintlig datorkod omstruktureras utan att dess externa beteende ändras så att koden blir lättare att läsa, underhålla samt enklare att förstå och felsöka. Det används när du har dubblettkod, långa metoder eller stora klasser i koden. Felsökning av kod går snabbare tack vare komprimerade funktioner och korrekt ersättning.

Med omstrukturering av JavaScript kan du byta namn på funktioner och ange omfånget för en variabel så att du kan anropa den inifrån det kodblock som den definieras i.

Obs!

Nu är omstrukturering av kod bara tillgänglig för .js-filer.

Omstrukturering av JavaScript

Du kan omstrukturera kod i dokumentformaten HTML, PHP och JavaScript. När du högerklickar i kodområdet i Dreamweaver visas alternativet Omstrukturera i den nedrullningsbara menyn. Omstrukturering har följande alternativ:

Byt namn
Extrahera till variabel
Extrahera till funktion
Kapsla i Try Catch
Kapsla i villkor
Konvertera till pilfunktion
Skapa Getters/Setters

Information om hur de olika omstruktureringsalternativen fungerar finns i följande avsnitt:

Byt namn

Byt namn används för att ändra alla förekomster av ett variabel- eller funktionsnamn i JavaScript-kod. Det är inte nödvändigt att markera variabler genom att klicka och dra.

Utför följande steg för att byta namn i JavaScript:

Markera eller placera textmarkören i koden som ska ändras.
Högerklicka på den markerade texten och välj Omstrukturera > Byt namn. Du kan även använda Ctrl + Alt + R i Windows eller Cmd + option + R på macOS-tangentbord för att byta namn.
En vy med flera markörer visas på skärmen och du kan ändra alla förekomster av variabeln. Du stegar automatiskt vidare till nästa förekomst av den aktuella markeringen. Skriv in ett unikt variabel- eller funktionsnamn igen för att ersätta det aktuella namnet.

Tidigare: Byt namn

Efter: Byt namn

Extrahera till variabel

Använd Extrahera till variabel för att ersätta ett uttryck med en variabel, en lokal variabel eller konstanter i JavaScript genom att markera ett uttryck och högerklicka på det. Välj sedan Omstrukturera > Extrahera till variabel. Du kan även använda kortkommandona Ctrl + Alt + V i Windows och Cmd + Alt + V på macOS.

Extrahera till funktion

Använd Extrahera till funktion för att ersätta ett uttryck i en funktions anrop inuti en parameter. Standardvärdet för den nya parametern kan initieras inuti funktionen eller skickas via funktionsanrop.

Utför följande steg för att omstrukturera med Extrahera till funktion:

Markera ett uttryck eller en uppsättning uttryck i JavaScript.

Markering av ett uttryck
Högerklicka och välj Omstrukturera > Extrahera till funktion. Du kan även använda kortkommandona Ctrl + Alt + M i Windows och Cmd + Alt + M på Mac.
Välj målomfånget för att extrahera funktionen från popupmenyn som visas på skärmen.

Typer av omfång
Utdatan varierar beroende på det valda målomfånget. Målomfånget kan exempelvis vara en konstruktor, den valda klassen eller en global funktion.

Detta är egenskaperna hos Extrahera till funktion:
- Det identifierar parametrarna att överföra baserat på de identifierare som är tillgängliga i markeringen eller i det extraherade omfånget.
- Det identifierar returparametrarna som ska returneras från funktionen baserat på identifierare vars värden har ändrats i markeringen.
- Det skapar även en funktion med ett unikt namn.
Följande skärmbilder visar utdata baserat på de respektive målomfång som valts av användaren.
Konstruktor

Klass

Global

Kapsla i Try Catch

Använd Kapsla i Try Catch för ett undantag i ett kodblock som visas som ett fel efter att programmet kompilerats. Den här funktionen kapslar in kodblocket i ett try catch-block. Det här kodblocket markeras som ett undantag när programmet körs.

Markera koden eller placera markören på den, högerklicka och välj Omstrukturera > Kapsla i Try Catch. Om du placerar markören på en plats hittar den de omgivande satserna, eller kontrollerar om koden består av satser eller inte. Om det finns satser kapslas koden in i ett Try Catch-block.

Kapsla i villkor

Använd Kapsla i villkor för ett uttryck i koden om du endast vill kompilera för ett specifikt villkor.

Markera ett uttryck i koden, högerklicka och välj Omstrukturera > Kapsla i villkor.

Konvertera till pilfunktion

En pilfunktion är ett uttryck som inte har egna funktionsuttryck som till exempel this, arguments, super eller new.target. Dessa funktionsuttryck används för uttryck utan metoder, och de kan inte användas som konstruktor.

Placera markören i en funktion, högerklicka och välj Omstrukturera > Konvertera till pilfunktion.

Obs!

Om den markerade satsen har en parameter visas parameterstrukturen som param => {statements}.
Om den markerade satsen har ingen eller mer än en parameter som t.ex. (param1, param2) visas parameterstrukturen som param (param1, param2) => {statements}.

Skapa Getters/Setters

I JavaScript kan en setter användas för att köra en funktion när en angiven egenskap måste ändras. Setters används vanligtvis tillsammans med getters för att skapa en typ av pseudoegenskap. Du kan inte skapa en setter för en egenskap som har ett faktiskt värde.

Placera markören på en medlem av ett objektuttryck, högerklicka och välj Omstrukturera > Skapa Getters/Setters.

Felsökningstips

I följande tabell finns felsökningstips för felmeddelanden som visas på skärmen på grund av felaktig markering av kod:

Funktionsnamn	Felmeddelande	Felsökningstips
Byt namn	Inget uttryck på den angivna platsen	Placera markören på eller efter en variabel eller ett funktionsnamn.
Extrahera till variabel	Markering utgör inte ett uttryck	Markera ett uttryck i koden innan du omstrukturerar koden.
Extrahera till funktion	Markerat block ska representera en uppsättning satser eller ett uttryck	Se till att du markerar blocket med satser eller uttryck.
Kapsla i Try Catch	Välj giltig kod att kapsla i ett Try Catch-block	Se till att du markerar kod innan du använder alternativet för omstrukturering med try catch.
Kapsla i villkor	Välj giltig kod att kapsla i ett villkorsblock	Se till att du markerar ett uttryck innan du använder alternativet Kapsla i villkor.
Konvertera till pilfunktion	Placera markören i ett funktionsuttryck	Se till att du placerar markören i ett funktionsuttryck innan du använder alternativet för omstrukturering.
Skapa Getters/Setters	Placera markören på en medlem av ett objektuttryck	Se till att du placerar markören på en medlem av ett objektuttryck innan du använder alternativet Skapa Getters/Setters.

Söka efter och ersätta text

Du kan använda Dreamweavers funktioner för att söka och ersätta och sök efter alla sorters texter, koder och blanksteg på din plats eller i din mapp.

Du kan söka i hela koden eller så kan du begränsa sökningen till bara den renderade texten i designvyn eller till bara koden.

Du kan också använda kraftfulla algoritmer för mönstermatchning (reguljära uttryck) för avancerade Sök och ersätt-åtgärder.

När du har hittat texten kan du välja att ersätta den med den angivna texten, koden eller blanksteget.

Mer information finns i Söka och ersätta text.

Förhandsgranska bilder och färger i kodvyn

När du har infogat relevant kod för bilder och färger kan du förhandsgranska dem direkt i kodvyn.

Förhandsgranskning av bild

För musen över bild-URL:erna för att visa en förhandsgranskning av bilden i kodvyn. Du kan förhandsgranska bilder som refereras till som något av följande:

url();
data-uri()
Src-attributvärdet för img-taggen

I Dreamweaver visas även förhandsgranskningar av bilder på fjärrservrar.

Om du inte kan visa förhandsgranskningar av bilder på fjärrsökvägar visas meddelandet ”Det gick inte att läsa in bilden”.

Du kan förhandsgranska följande bildtyper:

JPEG
JPG
PNG
GIF
SVG

Förhandsgranska färg

För musen över färgvärdena om du vill förhandsgranska färgerna i kodvyn. Följande format stöds:

Hexadecimala färgvärden med 3 eller 6 siffror: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Fördefinierade färgnamn, till exempel olivgrön, blågrön, röd.

Förhandsgranskningen av färg är tillgänglig i alla dokumenttyper för färgformaten ovan.

Högerklicka på ett värde och välj Snabbredigering för att öppna färgväljaren och välja en annan färg.

Obs!

Avmarkera alternativet Visa > Visningsalternativ för kod > Resursförhandsgranskning om du vill inaktivera förhandsvisning av bilder och färger.

Skriv ut kod

Du kan skriva ut kod för att redigera den i frånkopplat läge, arkivera den eller distribuera den.

Öppna en sida i kodvyn.
Välj Arkiv > Skriv ut kod.
Ange utskriftsalternativ och klicka sedan på OK (Windows) eller Skriv ut (Macintosh).

Adobe

Få hjälp snabbare och enklare

Ny användare?