Start Styling Your console.log() Messages in DevTools

  Рет қаралды 1,494

CSS Weekly

CSS Weekly

Күн бұрын

Get more out of your DevTools console by utilizing underused functions like warn(), error(), & table(), and learn how to easily style console.log() using CSS with format specifiers to get more distinguishable and more organized console output.
🔗 Links
In-Depth Guide to CSS Logical Properties: • In-Depth Guide to CSS ...
Top 11 Visual Studio Code Themes: • Top 11 Visual Studio C...
10 Fantastic VS Code Icon Themes: • 10 Fantastic VS Code I...
Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com/
🏷️ Use coupon code CONSOLE.LOG to get an additional 40% off on the already discounted, pre-launch price.
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
📖 Timestamps
00:00 How to open console in DevTools
00:40 How to use console.warn() and console.error()
01:14 How to clear the console
01:27 How to see all `console` object functions
02:04 How to use console.table()
02:29 How to view a variable and its value simply
03:17 How console.group() works
05:01 How to style console messages
06:17 Styling restrictions in DevTools
07:20 Practical example using multiple styles
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#devtools #css

Пікірлер: 6
@ahmad-murery
@ahmad-murery 9 ай бұрын
I liked the label trick, Thanks Zoran!
@CSSWeekly
@CSSWeekly 9 ай бұрын
I’m glad to hear this, Ahmad! 🙂 Thanks for always watching and commenting! I appreciate it! 🙏
@RadioactiveBlueberry
@RadioactiveBlueberry 9 ай бұрын
Really cool stuff! Thanks for sharing these hidden gems. Firefox tip: use var instead of let or const to avoid redeclaration error. Chrome treats them in the console the "wrong" way, but probably intentionally to not interrupt your work.
@CSSWeekly
@CSSWeekly 9 ай бұрын
Thank you so much for watching and for your tip! 🙏 I had no idea about this; I'd expect Chrome to throw an error too, but it seems like a good thing. 🙂
@Bass0hr
@Bass0hr 5 ай бұрын
I sometimes use console.dir to show objects in collapsed tree view.
@CSSWeekly
@CSSWeekly 5 ай бұрын
Yes, console.dir() can be very handy; console.table() just as well. 🙂
Chrome DevTools Tips - Styles Pane & Elements Panel
15:25
CSS Weekly
Рет қаралды 1,9 М.
Simplify Your CSS Using :is() and :where() Pseudo-Classes
9:22
CSS Weekly
Рет қаралды 1,5 М.
아이스크림으로 체감되는 요즘 물가
00:16
진영민yeongmin
Рет қаралды 57 МЛН
孩子多的烦恼?#火影忍者 #家庭 #佐助
00:31
火影忍者一家
Рет қаралды 51 МЛН
Хотите поиграть в такую?😄
00:16
МЯТНАЯ ФАНТА
Рет қаралды 2,7 МЛН
NERF WAR HEAVY: Drone Battle!
00:30
MacDannyGun
Рет қаралды 58 МЛН
How to speed up your workflow with Console shortcuts | DevTools Tips
6:30
Chrome for Developers
Рет қаралды 18 М.
Transition to "height: auto;" & "display: none;" Using Pure CSS
10:14
Single CSS keyframe tricks are magic
52:02
Bad at CSS
Рет қаралды 3,7 М.
Why is it so hard to get a software job right now? | Tech Recession
15:41
Tech and Beyond With Moss
Рет қаралды 40 М.
Animate HTML Details & Summary Elements Using Pure CSS
17:07
CSS Weekly
Рет қаралды 2 М.
Chrome Dev Tools Overview for Web Testing
28:07
EvilTester - Software Testing
Рет қаралды 15 М.
Don't use VSCode
35:31
PyCon South Africa
Рет қаралды 214 М.
I Left Software. A Cautionary Story About Burnout
18:38
Created By KC
Рет қаралды 259 М.
Email Obfuscation Using CSS
5:35
CSS Weekly
Рет қаралды 1,1 М.
Chrome Dev Tools 101: A Beginner's Guide to Using Dev Tools
17:25
1$ vs 500$ ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ !
23:20
GoldenBurst
Рет қаралды 1,7 МЛН
Easy Art with AR Drawing App - Step by step for Beginners
0:27
Melli Art School
Рет қаралды 14 МЛН
Собери ПК и Получи 10,000₽
1:00
build monsters
Рет қаралды 2,7 МЛН
Как удвоить напряжение? #электроника #умножитель
1:00
Hi Dev! – Электроника
Рет қаралды 684 М.