-
-
Save modster/67cb4e3e6ad9a0d49653b2cf5f4f160f to your computer and use it in GitHub Desktop.
Code from video about using the chrome dev tools console
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="main.css" /> | |
| <script src="main.js" type="module"></script> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Chrome Dev Tools</h1> | |
| </header> | |
| <main> | |
| <h2>Getting the Most from the console</h2> | |
| <p><code>Cmd + Option + J</code> Open the Console Mac</p> | |
| <p><code>Ctrl + Shift + J</code> Open the Console Windows</p> | |
| <p class="lorem"> | |
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi animi voluptatem, ullam, quibusdam nisi sit rerum corrupti tempore consequuntur, eaque illo placeat hic doloribus optio vero | |
| voluptates laborum non laudantium accusantium saepe. Ad, quo reiciendis porro similique cum nemo unde fuga perferendis velit quasi, praesentium atque id facere consequuntur numquam! | |
| </p> | |
| <p> | |
| Quaerat deleniti culpa animi est blanditiis laborum quis corporis voluptatibus architecto at temporibus, illum itaque quasi quisquam nulla aliquid non debitis quibusdam dolore. Earum veritatis | |
| deleniti qui necessitatibus iure ratione in velit illum dignissimos rerum labore veniam nisi, obcaecati laudantium perspiciatis consequatur dolorum quisquam suscipit quis provident dolorem. | |
| Quod, autem! | |
| </p> | |
| <p> | |
| Laborum ut quis dolore deleniti pariatur porro delectus sequi, nemo consequuntur repudiandae, dolorum, facere cumque et atque deserunt vero quaerat! Ipsam provident praesentium necessitatibus | |
| magnam quo sint officiis sunt maxime, doloribus blanditiis commodi iure eius illum cupiditate placeat eaque alias nobis fugit asperiores. Sint voluptatibus nostrum quos fugiat impedit omnis. | |
| </p> | |
| <p> | |
| Sit eveniet nam praesentium unde corrupti nesciunt doloremque, amet aliquid tempora culpa doloribus labore odio vitae laboriosam aspernatur, laudantium ipsam expedita, voluptates consequuntur! | |
| Vero, eos ducimus? Necessitatibus ad delectus, vero blanditiis autem ex suscipit repellat debitis deserunt perferendis dolor velit tempora ipsum obcaecati temporibus recusandae similique | |
| nesciunt minus quibusdam mollitia! | |
| </p> | |
| </main> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --fsize: 20px; | |
| --color: white; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| color: var(--color); | |
| font-size: 0.8rem; | |
| } | |
| html { | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: var(--fsize); | |
| font-weight: 300; | |
| line-height: 1.6; | |
| color-scheme: dark light; | |
| } | |
| body { | |
| min-height: 100vh; | |
| } | |
| header, | |
| main { | |
| padding: 1rem 4rem; | |
| } | |
| h1 { | |
| font-size: 3rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| } | |
| code { | |
| width: 800px; | |
| } | |
| p { | |
| font-size: 1rem; | |
| margin-block: 1rem; | |
| } | |
| @media screen and (prefers-color-scheme: light) { | |
| :root { | |
| --color: rebeccapurple; | |
| } | |
| } | |
| @media screen and (min-width: 600px) { | |
| :root { | |
| --fsize: 24px; | |
| --color: orangered; | |
| } | |
| } | |
| @media screen and (min-width: 900px) { | |
| :root { | |
| --fsize: 30px; | |
| --color: cornflowerblue; | |
| } | |
| } | |
| @media screen and (prefers-color-scheme: light) and (min-width: 900px) { | |
| :root { | |
| --color: steelblue; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| log() | |
| log({}) | |
| dir() | |
| warn() | |
| error() | |
| info() | |
| assert() | |
| time() | |
| timeEnd() | |
| trace() | |
| table() | |
| group() | |
| groupCollapsed() | |
| groupEnd() | |
| clear() | |
| */ | |
| console.time('one'); | |
| const log = console.log; | |
| const data = [ | |
| { | |
| id: crypto.randomUUID(), | |
| name: 'John', | |
| email: '[email protected]', | |
| }, | |
| { | |
| id: crypto.randomUUID(), | |
| name: 'Mary', | |
| email: '[email protected]', | |
| }, | |
| { | |
| id: crypto.randomUUID(), | |
| name: 'Sam', | |
| email: '[email protected]', | |
| }, | |
| { | |
| id: crypto.randomUUID(), | |
| name: 'Dean', | |
| email: '[email protected]', | |
| }, | |
| ]; | |
| const h2 = document.querySelector('h2'); | |
| console.groupCollapsed('Group'); | |
| for (let i = 0; i < data.length; i++) { | |
| console.log(data[i].name); | |
| } | |
| console.groupEnd('Group'); | |
| function one() { | |
| two(); | |
| } | |
| function two() { | |
| three(); | |
| } | |
| function three() { | |
| console.trace('inside three'); | |
| } | |
| one(); | |
| console.log('hello'); | |
| console.log({ data: data[0].name }); | |
| console.dir(data); | |
| console.error(new Error('Error message')); | |
| console.warn('Warn'); | |
| console.info('Info'); | |
| console.assert(1 - 1, h2.textContent); | |
| console.timeEnd('one'); | |
| console.clear(); | |
| console.table(data); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment