{"id":69315,"date":"2022-07-28T12:13:04","date_gmt":"2022-07-28T03:13:04","guid":{"rendered":"https:\/\/avinton.com\/academy\/google-chrome-devtools-basics\/"},"modified":"2022-07-28T16:38:53","modified_gmt":"2022-07-28T07:38:53","slug":"google-chrome-devtools-basics-for-web-app-development","status":"publish","type":"page","link":"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/","title":{"rendered":"Google Chrome DevTools Basics for Web App Development"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_single_image image=&#8221;69302&#8243; img_size=&#8221;&#8221; alignment=&#8221;center&#8221;][vc_column_text]<\/p>\n<p dir=\"auto\" data-sourcepos=\"14:1-14:175\">In this section, we will explain some basic things about Google Chrome DevTools that might help you build web pages.<\/p>\n<h2 class=\"header2\" dir=\"auto\" data-sourcepos=\"16:1-16:20\">Opening DevTools<\/h2>\n<p dir=\"auto\" data-sourcepos=\"5:1-5:62\">You will need to have Google Chrome installed on your machine.<\/p>\n<p dir=\"auto\" data-sourcepos=\"7:1-7:97\">Open Google Chrome and press f12. A window will be displayed in the right section of the browser.<\/p>\n<p dir=\"auto\" data-sourcepos=\"20:1-20:112\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-69290\" src=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2.jpg\" alt=\"Web\u30a2\u30d7\u30ea\u958b\u767a\u306b\u6b20\u304b\u305b\u306a\u3044Google Chrome DevTools\u306e\u57fa\u672c\" width=\"1920\" height=\"858\" srcset=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2.jpg 1920w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2-300x134.jpg 300w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2-1024x458.jpg 1024w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2-355x159.jpg 355w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2-1536x686.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p dir=\"auto\" data-sourcepos=\"12:1-12:125\">You will see the console, where you can write any JavaScript code you want, and then it will be executed on the website on the left.<\/p>\n<p dir=\"auto\" data-sourcepos=\"20:1-20:112\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-69288\" src=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console.png\" alt=\"Web\u30a2\u30d7\u30ea\u958b\u767a\u306b\u6b20\u304b\u305b\u306a\u3044Google Chrome DevTools\u306e\u57fa\u672c\" width=\"1032\" height=\"212\" srcset=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console.png 1032w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console-300x62.png 300w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console-1024x210.png 1024w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console-355x73.png 355w\" sizes=\"(max-width: 1032px) 100vw, 1032px\" \/><\/p>\n<h2 class=\"header2\" dir=\"auto\" data-sourcepos=\"28:1-28:63\">Testing websites using different mobile devices<\/h2>\n<p dir=\"auto\" data-sourcepos=\"30:1-30:122\">DevTools allows developers to test the website on different mobile devices.<\/p>\n<p dir=\"auto\" data-sourcepos=\"30:1-30:122\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-69292\" src=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-device.jpg\" alt=\"Web\u30a2\u30d7\u30ea\u958b\u767a\u306b\u6b20\u304b\u305b\u306a\u3044Google Chrome DevTools\u306e\u57fa\u672c\" width=\"1495\" height=\"509\" srcset=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-device.jpg 1495w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-device-300x102.jpg 300w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-device-1024x349.jpg 1024w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-device-355x121.jpg 355w\" sizes=\"(max-width: 1495px) 100vw, 1495px\" \/><\/p>\n<p dir=\"auto\" data-sourcepos=\"32:1-32:207\">Click to activate the toggle device toolbar and lots of options will be displayed.<\/p>\n<p dir=\"auto\" data-sourcepos=\"32:1-32:207\">You can switch between the different brands of phones and also rotate the phone.<\/p>\n<p dir=\"auto\" data-sourcepos=\"32:1-32:207\"><strong>Note: Although this is a helpful feature, it&#8217;s not perfect. It&#8217;s always recommended to do a final test on a real mobile device as well.<\/strong><\/p>\n<h2 class=\"header2\" dir=\"auto\" data-sourcepos=\"38:1-38:33\">Analyzing elements of the website<\/h2>\n<p dir=\"auto\" data-sourcepos=\"40:1-40:152\">The network tab allows you to see all the images and HTML code that is downloaded when you access a website.<\/p>\n<p dir=\"auto\" data-sourcepos=\"40:1-40:152\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-69294\" src=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-network.jpg\" alt=\"Web\u30a2\u30d7\u30ea\u958b\u767a\u306b\u6b20\u304b\u305b\u306a\u3044Google Chrome DevTools\u306e\u57fa\u672c\" width=\"1917\" height=\"1028\" srcset=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-network.jpg 1917w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-network-300x161.jpg 300w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-network-1024x549.jpg 1024w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-network-311x167.jpg 311w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-network-1536x824.jpg 1536w\" sizes=\"(max-width: 1917px) 100vw, 1917px\" \/><\/p>\n<p dir=\"auto\" data-sourcepos=\"7:1-7:23\">Here you can see:<\/p>\n<ul dir=\"auto\" data-sourcepos=\"9:1-13:0\">\n<li data-sourcepos=\"9:1-9:38\">How many files the website consists of.<\/li>\n<li data-sourcepos=\"10:1-10:49\">How much time it takes to download those files.<\/li>\n<li data-sourcepos=\"11:1-13:0\">How big they are.<\/li>\n<\/ul>\n<h2 dir=\"auto\" data-sourcepos=\"14:1-14:46\">Editing elements content from the DevTools<\/h2>\n<p dir=\"auto\" data-sourcepos=\"52:1-52:189\">DevTools allows you to edit the HTML and CSS of the website. This is really helpful sometimes since it allows you to test changes directly on production.<\/p>\n<p dir=\"auto\" data-sourcepos=\"52:1-52:189\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-69327\" src=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-3.png\" alt=\"Google Chrome DevTools Basics for Web App Development\" width=\"1886\" height=\"730\" srcset=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-3.png 1886w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-3-300x116.png 300w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-3-1024x396.png 1024w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-3-355x137.png 355w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-3-1536x595.png 1536w\" sizes=\"(max-width: 1886px) 100vw, 1886px\" \/><\/p>\n<h2 class=\"header2\" dir=\"auto\" data-sourcepos=\"56:1-56:30\">Understanding effects<\/h2>\n<p dir=\"auto\" data-sourcepos=\"3:1-3:149\">The most common issue when working with visualization effects (e. g. a menu opening) is that the code runs faster than the human eye can see.<\/p>\n<p dir=\"auto\" data-sourcepos=\"5:1-5:102\">Here is a sample of how can we see the visualization effect frame by frame, in order to detect possible errors.<\/p>\n<p dir=\"auto\" data-sourcepos=\"60:1-60:130\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-69332\" src=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-1.jpg\" alt=\"Google Chrome DevTools Basics for Web App Development\" width=\"1877\" height=\"638\" srcset=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-1.jpg 1877w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-1-300x102.jpg 300w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-1-1024x348.jpg 1024w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-1-355x121.jpg 355w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-1-1536x522.jpg 1536w\" sizes=\"(max-width: 1877px) 100vw, 1877px\" \/><\/p>\n<p dir=\"auto\" data-sourcepos=\"60:1-60:130\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-69330\" src=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-2.jpg\" alt=\"Google Chrome DevTools Basics for Web App Development\" width=\"1015\" height=\"685\" srcset=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-2.jpg 1015w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-2-300x202.jpg 300w, https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-chrome-devtools-basics-2-247x167.jpg 247w\" sizes=\"(max-width: 1015px) 100vw, 1015px\" \/><\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_single_image image=&#8221;69302&#8243; img_size=&#8221;&#8221; alignment=&#8221;center&#8221;][vc_column_text] In this section, we will explain some basic things about Google Chrome DevTools that might help you build web pages. Opening DevTools You will need to have Google Chrome installed on your machine. Open Google Chrome and press f12. A window will be displayed in the right section of the browser.<br \/><a href=\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/\" class=\"more\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":1906,"menu_order":98,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-69315","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Google Chrome DevTools Basics for Web App Development - Avinton Japan<\/title>\n<meta name=\"description\" content=\"In this section, we will explain some basic things about Google Chrome DevTools that might help you build web pages.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Chrome DevTools Basics for Web App Development - Avinton Japan\" \/>\n<meta property=\"og:description\" content=\"In this section, we will explain some basic things about Google Chrome DevTools that might help you build web pages.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Avinton Japan\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Avintons\/\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-28T07:38:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@AvintonJapan\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/\",\"url\":\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/\",\"name\":\"Google Chrome DevTools Basics for Web App Development - Avinton Japan\",\"isPartOf\":{\"@id\":\"https:\/\/avinton.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2.jpg\",\"datePublished\":\"2022-07-28T03:13:04+00:00\",\"dateModified\":\"2022-07-28T07:38:53+00:00\",\"description\":\"In this section, we will explain some basic things about Google Chrome DevTools that might help you build web pages.\",\"breadcrumb\":{\"@id\":\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/#primaryimage\",\"url\":\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2.jpg\",\"contentUrl\":\"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/avinton.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Avinton Academy\",\"item\":\"https:\/\/avinton.com\/en\/academy\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Google Chrome DevTools Basics for Web App Development\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/avinton.com\/en\/#website\",\"url\":\"https:\/\/avinton.com\/en\/\",\"name\":\"Avinton Japan\",\"description\":\"Tailored Solutions and Consulting in AI and Big Data\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/avinton.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Google Chrome DevTools Basics for Web App Development - Avinton Japan","description":"In this section, we will explain some basic things about Google Chrome DevTools that might help you build web pages.","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:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/","og_locale":"en_US","og_type":"article","og_title":"Google Chrome DevTools Basics for Web App Development - Avinton Japan","og_description":"In this section, we will explain some basic things about Google Chrome DevTools that might help you build web pages.","og_url":"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/","og_site_name":"Avinton Japan","article_publisher":"https:\/\/www.facebook.com\/Avintons\/","article_modified_time":"2022-07-28T07:38:53+00:00","og_image":[{"url":"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@AvintonJapan","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/","url":"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/","name":"Google Chrome DevTools Basics for Web App Development - Avinton Japan","isPartOf":{"@id":"https:\/\/avinton.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/#primaryimage"},"image":{"@id":"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/#primaryimage"},"thumbnailUrl":"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2.jpg","datePublished":"2022-07-28T03:13:04+00:00","dateModified":"2022-07-28T07:38:53+00:00","description":"In this section, we will explain some basic things about Google Chrome DevTools that might help you build web pages.","breadcrumb":{"@id":"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/#primaryimage","url":"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2.jpg","contentUrl":"https:\/\/avinton.com\/wp-content\/uploads\/2022\/07\/google-devtools-console2.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/avinton.com\/en\/academy\/google-chrome-devtools-basics-for-web-app-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avinton.com\/en\/"},{"@type":"ListItem","position":2,"name":"Avinton Academy","item":"https:\/\/avinton.com\/en\/academy\/"},{"@type":"ListItem","position":3,"name":"Google Chrome DevTools Basics for Web App Development"}]},{"@type":"WebSite","@id":"https:\/\/avinton.com\/en\/#website","url":"https:\/\/avinton.com\/en\/","name":"Avinton Japan","description":"Tailored Solutions and Consulting in AI and Big Data","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avinton.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/pages\/69315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/comments?post=69315"}],"version-history":[{"count":5,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/pages\/69315\/revisions"}],"predecessor-version":[{"id":69319,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/pages\/69315\/revisions\/69319"}],"up":[{"embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/pages\/1906"}],"wp:attachment":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/media?parent=69315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/categories?post=69315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/tags?post=69315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}