Placera insättningspunkten i koden.
Senast uppdaterad den
27 apr. 2021
Lär dig hur du arbetar i kodvyn och utnyttjar kodningsfunktionerna i Dreamweaver på bästa sätt.
Det finns flera sätt du kan arbeta med kod i Dreamweaver.
Du kan öppna en ny kodfil med dialogrutan Nytt dokument och 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 med Dreamweavers användbara Quick Docs.
Du kan också infoga kod med hjälp av panelen Insert eller använda kodgenvägar som Emmet-förkortningar.
Om du märker att du kopierar och klistrar in samma kodbit flera gånger, prova då dessa tidsbesparande funktioner:
- Snippets panel är ovärderlig för att snabbt skapa och infoga förformaterade kodavsnitt i din kod.
- Flera markörer gör att du kan skapa och redigera flera kodrader samtidigt.
Dreamweaver erbjuder också en stark uppsättning redigeringsverktyg som gör navigering genom och ändringar av din kod till en smidig process.
- Använd Dreamweavers sök och ersätt-funktion för att söka efter taggar, attribut eller text i kod.
- Använd kodnavigatören för att navigera till relaterad kod både inuti och utanför den aktuella filen. Ännu bättre, använd funktionen Quick Edit för att redigera kod i relaterade resurser utan att ens öppna filen i en ny flik.
- Högerklicka på koden för att öppna en enkel, relevant snabbmeny som låter dig redigera koden direkt.
- Använd Wrap Tag för att omsluta text i taggar.
Läs vidare för att få mer information om alla dessa kodfunktioner.
Infoga kod med hjälp av panelen Infoga
Välj lämplig kategori på panelen Infoga.
Klicka på en knapp i panelen Infoga eller välj ett alternativ från en snabbmeny i panelen Infoga.
När du klickar på en ikon visas koden på din sida omedelbart, eller så visas en dialogruta som begär 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 expanderas i CSS-, LESS-, SASS-, SCSS-sidor eller inom style-taggen på en HTML-sida.
Här är några exempel som visar hur du kan använda Emmet-förkortningar i kodvyn. För detaljerad information och referens, se Emmet-dokumentationen.
Obs!
Dreamweaver stöder för närvarande Emmet 1.2.2-förkortningar.
Exempel 1: Infoga HTML-kod med Emmet
För att snabbt lägga till HTML-kod för en osorterad lista med tre element, öppna HTML-filen och skriv följande Emmet-förkortning i kodvy inom <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. Alternativt kan du välja hela förkortningen och sedan trycka på Enter.
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
För att infoga CSS-kod för att skapa kantlinjeradie med leverantörsprefix öppnar du din CSS-fil och skriver följande Emmet-förkortning inuti en klass:
-bdrs
När du trycker på Tab expanderar 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 infogningspunkten och klicka på ikonen Infoga från verktygsfältet för att öppna undermenyn Använd kommentar.
Du kan också markera texten och göra den till en kommentar. Den markerade texten läggs i ett kommentarsblock.
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 din kommentarstext.
Du kan också använda kortkommandona Ctrl+/ (på Windows) eller Cmd+/ (på 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 tillämpas kommentaren på 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-/ (på Windows) eller Cmd-/ (på Mac) för att ta bort kommentarer.
Växla mellan kodkommentarer
Tryck på Ctrl+/ i Windows eller Cmd+/ på Mac för den markerade kommentaren eller raden för att växla mellan att visa och dölja kommentarer i kodvyn.
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!
Kopiera och klistra in samt sök och ersätt fungerar inte 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 någon befintlig text lägger du till flera markörer.
Om du vill ersätta befintlig text kan du göra flera markeringar. Du kan välja kontinuerliga eller icke-kontinuerliga textrader, eller båda, och lägga till markörer till dem.
Så här lägger du till flera markörer eller flera markeringar i samma kolumn över kontinuerliga rader:
Håll ned Alt-tangenten och klicka sedan och dra lodrätt. När du drar vertikalt läggs markörer till på varje rad som du drar över.
Tryck på Alt-tangenten och dra diagonalt om du vill markera sammanhängande textrader. När du drar diagonalt väljer Dreamweaver ett rektangulärt textblock inom den markeringen.
Obs!
Använd kortkommandot Skift+Alt+Upp eller Skift+Alt+Ned för att snabbt lägga till markörer eller inkludera flera rader i en markering.
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 på flera textrader ersätts den markerade texten med den nya texten du skriver.
Så här lägger du till flera markörer i olika kolumner över rader:
För att lägga till markörer på icke-kontinuerliga textrader håller du ned Ctrl-tangenten och klickar på de olika raderna där du vill placera markören.
För att välja icke-kontinuerliga textrader markerar du lite text, håller sedan ned Ctrl-tangenten (Windows) eller Cmd-tangenten (Mac) och fortsätter göra fler markeringar.
Så här lägger du till markörer i början/slutet av varje rad:
Välj flera textrader och tryck på vänster- eller högerpiltangenterna.
Så här lägger du till markörer på föregående eller följande rader i en markering:
Tryck på Skift+Alt+Upp/Ned-tangenterna och tryck sedan på högerpiltangenten.
Så här väljer du kontinuerliga och icke-kontinuerliga textrader:
Du kan kombinera dessa tekniker för att välja både kontinuerliga och separata textrader inom en enda markering.
Välj först de icke-kontinuerliga textraderna, tryck sedan på Ctrl-Alt (i Windows) eller Cmd-Alt (på Mac) och dra för att lägga till en uppsättning rader till de befintliga markeringarna.
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 eller värden.
Placera markören inom en egenskap eller ett värde och tryck Ctrl + K, Dreamweaver öppnar dokumentation från Web Platform Docs-projektet.
Du kan samtidigt öppna flera infogade redigerare och dokumentvisningsprogram.
För att stänga en enskild infogad redigerare eller dokumentvisningsprogram, klicka på "X" i det övre vänstra hörnet eller tryck Escape medan Quick Docs är i fokus.
För att stänga alla infogade redigerare och dokument, placera markören tillbaka i den huvudsakliga omslutande kodredigeraren och tryck Escape.
Analysera kod
Dreamweaver stöder linting (analys av kod för potentiella 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 med hjälp av linting.
I Dreamweaver visas dessutom en snabb felförhandsgranskning i kolumnen med radnummer i raden med fel. Radnumret visas i rött för att indikera att det innehåller fel, och när du håller muspekaren över det 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- eller Live-vy kan du använda den här funktionen för att omsluta objekt med en tagg.
Välj text i kodvy eller ett objekt i designvy och tryck Ctrl+T på tangentbordet.
En popup visas som låter dig välja från ett antal HTML-taggar.
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-vy omsluts det valda objektet med taggen.
Redigera kod med kodnings- kontextmenyn
Använd Dreamweavers kontextmeny för att göra snabba redigeringar av din kod.
Du öppnar snabbmenyn genom att högerklicka (Windows) eller Cmd-klicka (Mac). Följande alternativ är tillgängliga för dig att använda:
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å dessa alternativ för att snabbt klippa ut, kopiera och klistra in text utan att behöva komma åt menyn Redigera.
Sök och ersätt, Sök nästa, Sök föregående
Klicka på dessa alternativ för att hitta och ersätta text snabbt utan att behöva öppna Sök-menyn.
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 på en länk/skripttagg och klicka på öppna relaterad fil för att öppna filen.
Koppla formatmall
Bifoga en befintlig CSS-formatmall till din sida.
Komprimera markering
Markeringsundermenyn innehåller olika kodredigeringsalternativ som du kan använda på en vald del av koden, såsom växla rad- och blockkommentarer, expandera och minimera markering, konvertera inline 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
Undermenyn Code Hint Tools ger dig färgväljaren, URL-webbläsaren och teckensnittslistan nära till hands.
Dra in kodblock
När du skriver och redigerar kod i kodvy eller Kod-inspektören kan du ändra indragsnivån för ett markerat block eller en kodrad, genom att flytta den åt höger eller vänster med en tabb.
Dra in det markerade kodblocket
- Tryck Tabb, eller
- Tryck Ctrl+], eller
- Välj Redigera > Dra in kod.
Minska indrag för det valda kodblocket
- Tryck på Skift+Tab, eller
- Tryck på Ctrl+[, eller
- Välj Redigera > Minska radindrag.
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 komma åt kodnavigatorn från vyerna Design, Kod och Delad, och även från kodinspektören.
En videoöversikt från Dreamweavers utvecklingsteam om att arbeta med kodnavigatorn finns på www.adobe.com/go/dw10codenav.
En videogenomgång om att arbeta med Live View, relaterade filer och kodnavigatorn finns på www.adobe.com/go/lrvid4044_dw.
Öppna kodnavigatören
Alt+klicka (Windows) eller Cmd+Alt+klicka (Macintosh) var som helst på sidan.Kodnavigatorn visar länkar till koden som påverkar området du klickade på.
Klicka utanför kodnavigatören när du vill stänga den.
Obs!
Du kan också öppna kodnavigatorn genom att klicka på kodnavigatorindikatorn 
.Denna
indikator visas nära infogningspunkten på din sida när musen
har varit inaktiv i 2 sekunder.
Navigera till kod med kodnavigatorn
Öppna kodnavigatorn från det område 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 Nuvarande läge.
Obs!
När du hovrar över länkar till CSS-regler visar kodnavigatören verktygstips för egenskaperna i regeln. Dessa verktygstips är användbara när du vill skilja mellan många regler som delar 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.
För att återaktivera kodnavigatorindikatorn, Alt+klicka (Windows) eller Cmd+Alt+klicka (Macintosh) för att öppna kodnavigatorn och avmarkera alternativet Inaktivera indikator.
Gå till en JavaScript- eller VBScript-funktion
I kodvyn och kodinspektören kan du visa en lista över alla JavaScript eller VBScript-funktioner i din kod och hoppa till vilken som helst av dem.
Visa dokumentet i kodvy (Visa > Kod) eller kodinspektören (Fönster > Kodinspektor).
Gör något av följande:
Högerklicka (Windows) eller kontroll-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å Alternativ och kontroll-klickar (Macintosh) i kodvyn och väljer sedan undermenyn Funktioner.
- I kodinspektören klickar du på knappen Kodnavigation ({ }) i verktygsfältet.
Välj ett funktionsnamn för att hoppa till funktionen i din
kod.
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.
Observera följande begränsningar för 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.
För en videoöversikt från Dreamweavers utvecklingsteam om JavaScript-stöd i Dreamweaver, se www.adobe.com/go/dw10javascript.
Så här använder du JavaScript Extractor:
Öppna en sida som innehåller JavaScript.
Klicka på Verktyg > Externalisera JavaScript.
I dialogrutan Externalisera JavaScript redigerar du standardvalen om det behövs.
Välj Externalisera endast JavaScript om du vill att Dreamweaver ska flytta JavaScript till en extern fil och referera till den filen i det aktuella dokumentet. Det här alternativet lämnar händelsehanterare som onclick och onload i dokumentet och låter Behaviors vara synliga i Behaviors panel.
Välj Externalisera JavaScript 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 och infoga dem vid körning med JavaScript. När du väljer det här alternativet kan du inte längre redigera Behaviors i Behaviors-panelen.
I kolumnen Redigera avmarkerar du alla redigeringar du inte vill göra, eller väljer redigeringar som Dreamweaver inte valde som standard.
Som standard listar Dreamweaver men väljer inte följande redigeringar:
Skriptblock i dokumenthuvudet som innehåller document.write() eller document.writeln() anrop.
Skriptblock i dokumenthuvudet som innehåller funktionssignaturer relaterade till EOLAS-hanteringskod, som är känd för att använda document.write().
Skriptblock i brödtexten av dokumentet, om inte blocken innehåller endast Spry widget- eller Spry datauppsättningskonstruktörer.
Dreamweaver tilldelar automatiskt ID:n till element som inte redan har ID:n. Om du inte gillar dessa ID:n kan du ändra dem genom att redigera ID-textrutorna.
Klicka på OK.
Sammanfattningsdialogrutan ger en sammanfattning av extraktioner. 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
Istället för att röra till din kodmiljö med massor av paneler och ikoner, placerar snabbredigeringsläget i Dreamweaver kontextspecifik kod och verktyg inline så att du snabbt kan komma till det kodavsnitt du behöver.
Du kan gå in i snabbredigeringsläge genom att:
- Högerklicka på ett kodstycke och välj Snabbredigering från kontextmenyn som visas
- Tryck Ctrl + E (på Windows) eller Cmd+E (på 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 dessa regler direkt inline, utan att någonsin lämna kontexten för HTML-filen.
När flera regler matchar, navigera bland dem med listan på höger sida (eller använd Alt-Up/Down).
För att skapa en CSS-regel direkt från inline-redigeraren, klicka på Ny regel eller tryck Ctrl-Alt-N (på Windows) eller Cmd-Opt-N (på Mac).
Använda snabbredigeringsläge med JavaScript-filer
Placera markören på ett funktionsnamn i en JavaScript-fil. Snabbredigering visar funktionens brödtext (även om den finns i andra filer som refereras av ett require()-anrop).
Använda snabbredigeringsläge med CSS-, SCSS- eller LESS-filer
När du öppnar snabbredigering med markören inom ett färgvärde kan du komma åt färgväljaren och snabbt ändra färgerna som används i din CSS-kod.
I en CSS-, LESS- eller SCSS-fil, placera markören på en cubic-bezier()- eller steps()-övergångstidsfunktion och snabbredigering visar en grafisk övergångskurvredigerare.
Fördefinierade tidsfunktioner ease, ease-in, ease-out, ease-in-out, step-start och step-end är också giltiga utgångspunkter.
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 JavaScript-omstrukturering kan du byta namn på funktioner och ange variabelns omfång så att du kan anropa den från ett kodblock där den är definierad.
Obs!
Omstrukturering av kod är nu endast tillgänglig i .js-filer.
Omstrukturering av JavaScript
Du kan omstrukturera kod i dokumentformaten HTML, PHP och JavaScript. När du högerklickar på kodområdet i Dreamweaver visas alternativet Refactor på rullgardinsmenyn.Refactor består av följande alternativ:
- Byt namn
- Extrahera till variabel
- Extrahera till funktion
- Kapsla i Try Catch
- Kapsla i villkor
- Konvertera till pilfunktion
- Skapa Getters/Setters
För att förstå funktionen för varje omstruktureringssalternativ, se följande avsnitt:
Byt namn
Byt namn används för att ändra alla förekomster av ett variabel- eller funktionsnamn i JavaScript-kod. Att välja en Variabel genom att klicka och dra är inte nödvändigt för omstrukturering.
Utför följande steg för att byta namn i JavaScript:
Markera eller placera textmarkören i koden som behöver ändras.
Högerklicka på den valda texten och välj sedan Refactor > Rename. Du kan också använda kortkommandot Ctrl + Alt + R på Windows eller Command + option + R på macOS 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. Retype ett unikt variabel- eller funktionsnamn för att ersätta det nuvarande namnet.
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 också använda Ctrl + Alt + V på Windows OS 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 initialiseras i funktionens brödtext eller skickas via funktionsanrop.
Utför följande steg för att omstrukturera med Extract to Function:
Välj valfritt uttryck eller en uppsättning uttryck i JavaScript.
Högerklicka och välj Refactor > Extract to Function. Du kan också använda Ctrl + Alt + M på Windows eller Cmd + Alt + M på Mac.
Välja målomfattningen för att extrahera funktionen från popup-menyn som visas på skärmen.
Utdatan varierar beroende på det valda målomfånget. Till exempel kan målomfattningen vara en konstruktor, den valda klassen eller en global funktion.
Egenskaperna för Extract to function är:
- Den identifierar parametrarna som ska skickas baserat på identifierare som är tillgängliga i urvalet eller i det extraherade området.
- Den identifierar returparametrarna som ska returneras från funktionen baserat på identifierare vars Värden ändras i urvalet.
- Den skapar också en funktion med ett unikt namn.
Följande skärmbilder visar resultatet baserat på respektive målomfattning som valts.
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. Detta kodblock är markerat som ett undantag när programmet körs.
Markera eller placera markören vid koden, högerklicka och välj Refactor > Wrap in Try Catch. Om du placerar markören vid en position hittar den omgivande uttryck, annars kontrollerar den om koden består av uttryck eller inte. Om det finns uttryck omsluter den koden i ett Try Catch-block.
Kapsla i villkor
Använd Wrap in Condition för att kompilera ett uttryck i en kod endast för ett specifikt villkor.
Markera ett uttryck i koden, högerklicka och välj Refactor > Wrap in Condition.
Konvertera till pilfunktion
En pilfunktion är ett uttryck som inte har sina egna funktionsuttryck som this, arguments, super, eller new.target. Dessa funktionsuttryck är för icke-metoduttryck och de kan inte användas som en konstruktor.
Placera markören i en funktion, högerklicka och välj Refactor > Convert to Arrow Function.
Obs!
- Om det valda uttrycket har en parameter visas parameterstrukturen som param => {statements}.
- Om det valda uttrycket har noll eller fler än en parameter som param (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 till en egenskap som har ett faktiskt värde.
Placera markören vid en medlem av ett objektuttryck, högerklicka och välj Refactor > Create Getters/Setters.
Felsökningstips
Följande tabell innehåller felsökningstips för motsvarande felmeddelanden som visas på skärmen på grund av felaktigt val 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 sök- och ersättfunktioner för att söka efter alla typer av text, kod eller mellanslag på din webbplats 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örhandsgranskning av 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örhandsvisning
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ärde för img-tagg
I Dreamweaver visas även förhandsgranskningar av bilder på fjärrservrar.
Om Dreamweaver inte kan visa förhandsgranskningen för fjärrvägar visar det meddelandet "Unable to load image".
Du kan förhandsgranska följande bildtyper:
- JPEG
- JPG
- PNG
- GIF
- SVG
Färgförhandsgranskning
För musen över färgvärdena om du vill förhandsgranska färgerna i kodvyn. Format som stöds är:
- 3- och 6-siffriga hexadecimala färgvärden: #ff0000;
- RGB: rgb(0, 0, 0);
- RGBA: rgba(0, 255, 228,0.5);
- NML: hsl(120, 100%, 50%);
- HSLA: hsla(120, 60%, 70%, 0.3);
- Fördefinierade färgnamn, som till exempel Olive, Teal, red.
Förhandsgranskning av färger är tillgängligt i alla dokumenttyper för ovanstående färgformat.
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!
För att inaktivera förhandsgranskningar för bilder och färger avmarkerar du alternativet Visa > Alternativ för kodvy > Förhandsgranskning av resurs.
Skriv ut kod
Du kan skriva ut din kod för att redigera den offline, 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).
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
