Skip to content

Chrome Dev Tools

satyamgoel edited this page Sep 26, 2020 · 1 revision

Introduction:

Welcome to get a Pro User of Chrome:

After you have installed Chrome Chrome Install here open the https://ohioh.de in the Chrome Browser. Now on the page press "F12" or go to 3 dots button at the right side of the window in Chrome-Browser klick to more Tools and the Developer-Tools. The OHIOH side will slide to the left and a new Menu will open. This is the "OpenMind"-Tool that we have promised to make all progresses in our App avaible.

Chrome View

Now you can see how it should look.

This Dev-Tool shows you everything that happens at a homepage or Web-App. That is the reason why we decided to go to progressive web app. It is very similar to a homepage and you can look to each progress, service, cache etc.! The big benefit is to have the visual View ( if not press ctrl+shift+m ) And you can simulate a smartphone device too. Play around on it. You can not break something in it.

Lets dive deeper inside. Klick on "Element" on the Dev-Tool Top-Bar.Now you should see on the left the mobileview and on the right the creazy code. No, not so creazy. It is HTML. Here you can look deeper to html but you dont need it now: HTML

We want to show you that you can click on the Header-Picture ( or what ever is interesting to you) to get shown where the cryptic text on the right handle this part of the page. The code on the right side is sent from our Server to you and your browser translate it for you in a visual way.

Links&Videos:

Installation & preparation:

Usage:

Contributing:

Credits & Links:

Partners:

License:

Clone this wiki locally