Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kubrianity/chrome-dev-tools-tricks
14 Must Know Dev Tools Tricks
https://github.com/kubrianity/chrome-dev-tools-tricks
Last synced: about 1 month ago
JSON representation
14 Must Know Dev Tools Tricks
- Host: GitHub
- URL: https://github.com/kubrianity/chrome-dev-tools-tricks
- Owner: Kubrianity
- Created: 2022-06-30T19:11:43.000Z (over 2 years ago)
- Default Branch: root
- Last Pushed: 2022-07-11T12:01:32.000Z (over 2 years ago)
- Last Synced: 2024-11-07T09:36:21.523Z (3 months ago)
- Language: HTML
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JavaScript 30 #9: chrome-dev-tools-tricks
This is the ninth practice of JavaScript30 Challenge.
This practice shows some features of developer tools and console methods.
## Usage & Features
- Interpolation
```
console.log("Hello, I am a %s!", "world")
```
- Styling
```
console.log("%c I am some great text", "font-size:25px; color:red");
```
- Warning
```
console.warn("OH NOOO!!!")
```
- Error
```
console.error("Oops, error!")
```
- Info
```
console.info("Octopuses have three hearts")
```
- Testing
```
console.assert(1 === 2, 'That is wrong'); //only fired when assertion is wrong
```
- Clearing
```
console.clear()
```
- Viewing DOM elements
```
const p = document.querySelector("p")
console.log(p); //view the element
console.dir(p); //show methods and properties
```
- Grouping together
```
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }]
dogs.forEach(dog => {
console.group(`${dog.name}`);
console.log(`This is ${dog.name}`);
console.log(`${dog.name} is ${dog.age} years old`);
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
console.groupEnd(`${dog.name}`);
})
```
- Counting
```
console.count('Hermione')
console.count('Ron')
console.count('Harry')
```
- Timing
```
console.time('fetching data');
fetch('https://api.github.com/users/Kubrianity')
.then(data => data.json())
.then(data => {
console.timeEnd('fetching data');
console.log(data);
})
```
- Table
```
console.table(dogs)
```