{"id":1718,"date":"2013-07-20T15:04:26","date_gmt":"2013-07-20T13:04:26","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1718"},"modified":"2023-04-01T18:13:25","modified_gmt":"2023-04-01T16:13:25","slug":"tester-du-responsive-sous-chrome-sans-plugin-2-astuces","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/","title":{"rendered":"Tester du responsive sous Chrome sans plugin : 2 astuces"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 11 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Beaucoup connaissent d\u00e9j\u00e0 le CTRL + SHIFT + M pour passer en mode \u00ab\u00a0teste responsive\u00a0\u00bb sur Firefox, mais saviez vous que Chrome propose plus ou moins un \u00e9quivalent natif sans avoir \u00e0 installer un seul plugin ? Ce qui suit \u00e0 \u00e9t\u00e9 test\u00e9 sur Chrome 28+.<\/p>\n

Astuce 1: l’inspecteur et le mode \u00ab\u00a0r\u00e8gle\u00a0\u00bb<\/h2>\n

Lorsque vous ouvrez un site et que vous ouvrez l’inspecteur, si vous redimensionnez votre fen\u00eatre vous voyez d\u00e9sormais apparaitre une petite r\u00e8gle horizontale et verticale sur les c\u00f4t\u00e9s de votre \u00e9cran. Elle vous permet de donner \u00e0 votre navigateur la taille exacte que vous souhaitez tester.<\/p>\n

\"Tester<\/p>\n

L’inconv\u00e9nient de ce mode par contre, est qu’il faut redimensionner tout le navigateur, et donc rendre la barre d’adresse illisible et l’acc\u00e8s \u00e0 vos plugins impossible. Ce qui m’am\u00e8ne \u00e0 l’astuce 2.<\/p>\n

Astuce 2 :  l’option \u00ab\u00a0Device metrics\u00a0\u00bb dans overrides<\/h2>\n

En restant toujours dans l’inspecteur cliquez sur la petite roue en bas \u00e0 droite. Vous avez alors acc\u00e8s aux options g\u00e9n\u00e9rales, mais aussi aux options d’overrides. La premi\u00e8re case permet de change le UserAgent de votre navigateur et vous faire passer pour un iPhone par exemple.<\/p>\n

C’est la seconde option qui va nous int\u00e9resser \u00e0 savoir \u00ab\u00a0Device metrics\u00a0\u00bb. En cochant cette option, vous passez dans un mode \u00ab\u00a0responsive\u00a0\u00bb qui vous permet de tester votre site sur une largeur et hauteur donn\u00e9e, tout en gardant la taille compl\u00e8te du navigateur. Le bouton \u00e0 droite permet de passer du mode paysage au mode portrait, le tout sans plugin suppl\u00e9mentaire.<\/p>\n

\"Le<\/p>\n

Conclusion<\/h2>\n

Ces deux petites astuces sont bien pratiques, mais pour moi elles sont loin d’\u00e9gal\u00e9es pour le moment l’option propos\u00e9e par Firefox. Avec le \u00ab\u00a0Device metrics\u00a0\u00bb, impossible (pour le moment ?) de jouer avec la taille comme on peut le faire dans Firefox \u00e0 l’aide d’une poign\u00e9e sur le c\u00f4t\u00e9, il va vous falloir donner des valeurs fixes. L’utilisation dans Chrome est \u00e9galement moins \u00ab\u00a0rapide\u00a0\u00bb d’acc\u00e8s, on est loin du CTRL+SHIFT+M, mais c’est un bon d\u00e9but pour faciliter les tests de site responsive sous Webkit<\/del>  Blink :)<\/p>\n

Enfin si vous souhaitez \u00e9muler de \u00ab\u00a0vrais\u00a0\u00bb appareils je vous conseil Mobile Emulators & Simulators: The Ultimate Guide<\/a>.<\/p>\n

\"Le<\/p>\n

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

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 11 ans. Il se peut qu’il ne soit plus \u00e0 jour.Beaucoup connaissent d\u00e9j\u00e0 le CTRL + SHIFT + M pour passer en mode \u00ab\u00a0teste responsive\u00a0\u00bb sur Firefox, mais saviez vous que Chrome propose plus ou moins un \u00e9quivalent natif sans avoir \u00e0 installer un seul plugin ? Ce qui suit \u00e0 \u00e9t\u00e9 test\u00e9 sur Chrome 28+. Astuce 1: l’inspecteur et le mode \u00ab\u00a0r\u00e8gle\u00a0\u00bb Lorsque vous ouvrez un site et que vous ouvrez …<\/p>\n","protected":false},"author":3,"featured_media":1724,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[224],"tags":[],"class_list":["post-1718","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles-dates-pas-mis-a-jours"],"yoast_head":"\nTester du responsive sous Chrome sans plugin : 2 astuces - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Tester le responsive webdesign dans chrome sans plugin gr\u00e2ce \u00e0 la r\u00e8gle de l'inspecteur et le mode "Device metrics"\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tester du responsive sous Chrome sans plugin : 2 astuces - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Tester le responsive webdesign dans chrome sans plugin gr\u00e2ce \u00e0 la r\u00e8gle de l'inspecteur et le mode "Device metrics"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-20T13:04:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-01T16:13:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/07\/chrome-responsive-webdesign.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/\",\"name\":\"Tester du responsive sous Chrome sans plugin : 2 astuces - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/chrome-responsive-webdesign.jpg\",\"datePublished\":\"2013-07-20T13:04:26+00:00\",\"dateModified\":\"2023-04-01T16:13:25+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Tester le responsive webdesign dans chrome sans plugin gr\u00e2ce \u00e0 la r\u00e8gle de l'inspecteur et le mode \\\"Device metrics\\\"\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/chrome-responsive-webdesign.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/chrome-responsive-webdesign.jpg\",\"width\":700,\"height\":200,\"caption\":\"Tester du responsive sous Chrome sans plugin : 2 astuces\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tester du responsive sous Chrome sans plugin : 2 astuces - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Tester le responsive webdesign dans chrome sans plugin gr\u00e2ce \u00e0 la r\u00e8gle de l'inspecteur et le mode \"Device metrics\"","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:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/","og_locale":"fr_FR","og_type":"article","og_title":"Tester du responsive sous Chrome sans plugin : 2 astuces - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Tester le responsive webdesign dans chrome sans plugin gr\u00e2ce \u00e0 la r\u00e8gle de l'inspecteur et le mode \"Device metrics\"","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-07-20T13:04:26+00:00","article_modified_time":"2023-04-01T16:13:25+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/07\/chrome-responsive-webdesign.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/","name":"Tester du responsive sous Chrome sans plugin : 2 astuces - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/chrome-responsive-webdesign.jpg","datePublished":"2013-07-20T13:04:26+00:00","dateModified":"2023-04-01T16:13:25+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Tester le responsive webdesign dans chrome sans plugin gr\u00e2ce \u00e0 la r\u00e8gle de l'inspecteur et le mode \"Device metrics\"","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/tester-du-responsive-sous-chrome-sans-plugin-2-astuces\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/chrome-responsive-webdesign.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/chrome-responsive-webdesign.jpg","width":700,"height":200,"caption":"Tester du responsive sous Chrome sans plugin : 2 astuces"},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=1718"}],"version-history":[{"count":1,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1718\/revisions"}],"predecessor-version":[{"id":8410,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1718\/revisions\/8410"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1724"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}