{"id":5287,"date":"2017-06-16T10:31:03","date_gmt":"2017-06-16T08:31:03","guid":{"rendered":"https:\/\/www.nemprogrammering.dk\/wp\/?p=5287"},"modified":"2018-01-13T16:43:11","modified_gmt":"2018-01-13T15:43:11","slug":"5-funktioner-chrome-developer-enhver-udvikler-boer-kende","status":"publish","type":"post","link":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/","title":{"rendered":"5 funktioner i Chrome Developer tools enhver udvikler b\u00f8r kende!"},"content":{"rendered":"

Developer tools i Google Chrome er et uundv\u00e6rlig v\u00e6rkt\u00f8j for enhver webudvikler<\/a>, og langt de fleste som arbejder med hjemmesider og webshop har v\u00e6rkt\u00f8jet \u00e5ben minimum \u00e9n gang om dagen. Men f\u00e5r du det optimale ud af Developer Tools? Kender du alle de smarte funktioner, som v\u00e6rkt\u00f8jet har at byde p\u00e5?<\/p>\n

I denne artikel kigger vi p\u00e5 5 funktioner i Developer tools, som enhver udvikler b\u00f8r kende til, da de kan g\u00f8re dit arbejde langt nemmere og ikke mindst mere effektivt.<\/p>\n

1 – Find hex-farvekoden<\/h2>\n

Hvis du ogs\u00e5 har sv\u00e6rt ved at huske hex-farver eller bare gerne vil have en nem m\u00e5de at genbruge farver fra dit website, s\u00e5 er denne funktion lige noget for dig.<\/p>\n

I developer tools findes der nemlig et pipette-v\u00e6rkt\u00f8j, som g\u00f8r det muligt for dig at “suge” en farve fra dit eller et andet website. Med pipette-v\u00e6rkt\u00f8jet kan du alts\u00e5 lynhurtigt snuppe den rigtige farveode fra et andet element eller billede og genbruge ten p\u00e5 din egen side uden selv at skulle ind og lede efter farvekoden i\u00a0CSS<\/a>\u00b4en.<\/p>\n

Du kalder pipette-v\u00e6rkt\u00f8jet frem ved at trykke p\u00e5 den lille farve-firkant, som vist nedenfor.<\/p>\n

\"\"<\/p>\n

Herefter f\u00e5r du en pipette frem, og du kan nu f\u00f8re pipetten hen p\u00e5 det sted p\u00e5 siden, hvorfra du gerne vil have farvekoden p\u00e5 en given farve.<\/p>\n

2 – Test din side med andre internet-forbindelser<\/h2>\n

N\u00e5r du tester din side, s\u00e5 er det vigtigt, at den ogs\u00e5 performer godt p\u00e5 knap s\u00e5 hurtige internetforbindelser. Har du f.eks. en fiberforbindelse, s\u00e5 kan det godt v\u00e6re, at din side loader fint hurtigt hos dig, men bes\u00f8ger man din hjemmeside p\u00e5 en mobiltelefon med en d\u00e5rlig 4G-forbindelse, kan oplevelsen m\u00e5ske v\u00e6re en helt anden.<\/p>\n

Du kan i developer tools bruge det man kalder for “throttling”, hvilket er en funktion som begr\u00e6nser den hastighed hjemmesiden indl\u00e6ses p\u00e5. Du kan v\u00e6lge mellem forskellige forbindelsestyper, og derved teste, hvor hurtigt sin side loader p\u00e5 selv de langsomste forbindelser.<\/p>\n

Du finder\u00a0throttling under “Network”-fanen.<\/p>\n

\"network\"<\/p>\n

3 – K\u00f8r developer tools i fuld sk\u00e6rm<\/h2>\n

Hvis man har to sk\u00e6rme til r\u00e5dighed, kan det ofte v\u00e6re en fordel at arbejde med developer tools p\u00e5 en sk\u00e6rm for sig selv.<\/p>\n

Du kan v\u00e6lge din “Dock-side” ved at trykke p\u00e5 den lille kebabmenu (tre lodrette prikker) og herefter v\u00e6lge den m\u00e5de du vil dokke din developer tools<\/p>\n

\"dokking\"<\/p>\n

4 – Fremkald permanent hover-effekt<\/h2>\n

Vil du gerne arbejde med et element i dets hover-stadie, s\u00e5 kan dette v\u00e6re ganske umuligt, hvis du ikke permanent kan fastl\u00e5se dit element i det stadie. Det kan du heldigvis med developer tools.<\/p>\n

Alt hvad du skal g\u00f8re er f\u00f8rst at v\u00e6lge det element, du \u00f8nsker skal vises i sit hover-stadie, og derefter g\u00e5r til “:hov” og v\u00e6lge hover, som vist herunder. Du kan selvf\u00f8lge ogs\u00e5 v\u00e6lge alle de andre stadier.<\/p>\n

\"hover\"<\/p>\n

5 – Visning af side p\u00e5 forskellige enheder<\/h2>\n

Du kan hurtigt og nemt teste, hvordan din side ser ud p\u00e5 forskellige enheder. Alt hvad du skal g\u00f8re er at trykke p\u00e5 det lille “toogle device” ikon, hvorefter du kan v\u00e6lge, hvilken enhed du gerne vil vise din side med.<\/p>\n

\"Device\"<\/p>\n

 <\/p>\n

Det kan v\u00e6re at du m\u00e5ske allerede kendte et par af disse funktioner f\u00f8r, men forh\u00e5bentlig har du ogs\u00e5 l\u00e6rt noget nyt, som kan hj\u00e6lpe dig, n\u00e5r du arbejder med dine egne sider.<\/p>\n

Har du sp\u00f8rgsm\u00e5l eller har du en funktion som du mener andre b\u00f8r kender, s\u00e5 skal du v\u00e6re velkommen til at skrive en kommentar herunder!<\/p>\n

Denne artikel blev bragt i samarbejde med tweak.dk<\/a><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Developer tools i Google Chrome er et uundv\u00e6rlig v\u00e6rkt\u00f8j for enhver webudvikler, og langt de fleste som arbejder med hjemmesider og webshop har v\u00e6rkt\u00f8jet \u00e5ben minimum \u00e9n gang om dagen. Men f\u00e5r du det optimale ud af Developer Tools? Kender du alle de smarte funktioner, som v\u00e6rkt\u00f8jet har at byde p\u00e5? I denne artikel kigger […]<\/p>\n","protected":false},"author":249,"featured_media":5289,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,40,51],"tags":[],"class_list":["post-5287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-artikler-og-videoer","category-off-topic","category-wordpress-artikler"],"yoast_head":"\n5 funktioner i Chrome Developer tools enhver udvikler b\u00f8r kende!<\/title>\n<meta name=\"description\" content=\"I dette indl\u00e6g giver vi dig 5 funktioner i Google Chrome Developer tools som vil g\u00f8re din hverdag som udvikler meget nemmere!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 funktioner i Chrome Developer tools enhver udvikler b\u00f8r kende!\" \/>\n<meta property=\"og:description\" content=\"I dette indl\u00e6g giver vi dig 5 funktioner i Google Chrome Developer tools som vil g\u00f8re din hverdag som udvikler meget nemmere!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/\" \/>\n<meta property=\"og:site_name\" content=\"NemProgrammering.dk\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-16T08:31:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-13T15:43:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.nemprogrammering.dk\/wp\/wp-content\/uploads\/2017\/06\/chrome-developer-tools.png\" \/>\n\t<meta property=\"og:image:width\" content=\"885\" \/>\n\t<meta property=\"og:image:height\" content=\"270\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thomas Iversen\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Iversen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutter\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 funktioner i Chrome Developer tools enhver udvikler b\u00f8r kende!","description":"I dette indl\u00e6g giver vi dig 5 funktioner i Google Chrome Developer tools som vil g\u00f8re din hverdag som udvikler meget nemmere!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/","og_locale":"da_DK","og_type":"article","og_title":"5 funktioner i Chrome Developer tools enhver udvikler b\u00f8r kende!","og_description":"I dette indl\u00e6g giver vi dig 5 funktioner i Google Chrome Developer tools som vil g\u00f8re din hverdag som udvikler meget nemmere!","og_url":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/","og_site_name":"NemProgrammering.dk","article_published_time":"2017-06-16T08:31:03+00:00","article_modified_time":"2018-01-13T15:43:11+00:00","og_image":[{"width":885,"height":270,"url":"https:\/\/www.nemprogrammering.dk\/wp\/wp-content\/uploads\/2017\/06\/chrome-developer-tools.png","type":"image\/png"}],"author":"Thomas Iversen","twitter_misc":{"Skrevet af":"Thomas Iversen","Estimeret l\u00e6setid":"3 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/#article","isPartOf":{"@id":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/"},"author":{"name":"Thomas Iversen","@id":"https:\/\/www.nemprogrammering.dk\/wp\/#\/schema\/person\/5954716500923309d5bfc0c0a5d4c317"},"headline":"5 funktioner i Chrome Developer tools enhver udvikler b\u00f8r kende!","datePublished":"2017-06-16T08:31:03+00:00","dateModified":"2018-01-13T15:43:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/"},"wordCount":647,"commentCount":0,"image":{"@id":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/#primaryimage"},"thumbnailUrl":"https:\/\/www.nemprogrammering.dk\/wp\/wp-content\/uploads\/2017\/06\/chrome-developer-tools.png","articleSection":["HTML + HTML5","Off topic","WordPress"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/","url":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/","name":"5 funktioner i Chrome Developer tools enhver udvikler b\u00f8r kende!","isPartOf":{"@id":"https:\/\/www.nemprogrammering.dk\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/#primaryimage"},"image":{"@id":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/#primaryimage"},"thumbnailUrl":"https:\/\/www.nemprogrammering.dk\/wp\/wp-content\/uploads\/2017\/06\/chrome-developer-tools.png","datePublished":"2017-06-16T08:31:03+00:00","dateModified":"2018-01-13T15:43:11+00:00","author":{"@id":"https:\/\/www.nemprogrammering.dk\/wp\/#\/schema\/person\/5954716500923309d5bfc0c0a5d4c317"},"description":"I dette indl\u00e6g giver vi dig 5 funktioner i Google Chrome Developer tools som vil g\u00f8re din hverdag som udvikler meget nemmere!","breadcrumb":{"@id":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/#primaryimage","url":"https:\/\/www.nemprogrammering.dk\/wp\/wp-content\/uploads\/2017\/06\/chrome-developer-tools.png","contentUrl":"https:\/\/www.nemprogrammering.dk\/wp\/wp-content\/uploads\/2017\/06\/chrome-developer-tools.png","width":885,"height":270,"caption":"Chrome developer tools"},{"@type":"BreadcrumbList","@id":"https:\/\/www.nemprogrammering.dk\/wp\/5-funktioner-chrome-developer-enhver-udvikler-boer-kende\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Hjem","item":"https:\/\/www.nemprogrammering.dk\/wp\/"},{"@type":"ListItem","position":2,"name":"5 funktioner i Chrome Developer tools enhver udvikler b\u00f8r kende!"}]},{"@type":"WebSite","@id":"https:\/\/www.nemprogrammering.dk\/wp\/#website","url":"https:\/\/www.nemprogrammering.dk\/wp\/","name":"NemProgrammering.dk","description":"Gratis HTML, CSS, PHP, WORDPRESS TUTORIALS OG GUIDES","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.nemprogrammering.dk\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Person","@id":"https:\/\/www.nemprogrammering.dk\/wp\/#\/schema\/person\/5954716500923309d5bfc0c0a5d4c317","name":"Thomas Iversen","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/e0031fa642aa4be8499828051754ed72b7922639dad9a1f211dd63a90ad79504?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e0031fa642aa4be8499828051754ed72b7922639dad9a1f211dd63a90ad79504?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e0031fa642aa4be8499828051754ed72b7922639dad9a1f211dd63a90ad79504?s=96&d=mm&r=g","caption":"Thomas Iversen"},"url":"https:\/\/www.nemprogrammering.dk\/wp\/author\/t-s-iversen\/"}]}},"_links":{"self":[{"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/posts\/5287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/users\/249"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/comments?post=5287"}],"version-history":[{"count":7,"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/posts\/5287\/revisions"}],"predecessor-version":[{"id":5300,"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/posts\/5287\/revisions\/5300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/media\/5289"}],"wp:attachment":[{"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/media?parent=5287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/categories?post=5287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nemprogrammering.dk\/wp\/wp-json\/wp\/v2\/tags?post=5287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}