JavaScript 09 — Console Tricks

最新推荐文章于 2024-06-16 12:11:30 发布

真不吃香菜

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量128

点赞数 1

分类专栏： JS 30 文章标签： javascript 前端 Console 调试断点调试

本文链接：https://blog.csdn.net/Cici__zc/article/details/120967903

版权

JS 30 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学会各种调试技巧。

知识点参考：Day09 - Console 调试各种姿势指南

<body>

<p onClick="makeGreen()">×BREAK×DOWN×</p>

<script>
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

function makeGreen() {
  const p = document.querySelector('p');
  p.style.color = '#BADA55';
  p.style.fontSize = '50px';
}

// Regular
console.log('hello');

// Interpolated
console.log('Hello I am a %s string!', '💩');

// Styled
// console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

// warning!
console.warn('OH NOOO');

// Error :|
console.error('Shit!');

// Info
console.info('Crocodiles eat 3-4 people per year');

// Testing
const p = document.querySelector('p');

console.assert(p.classList.contains('ouch'), 'That is wrong!');

// clearing
console.clear();

// Viewing DOM Elements
console.log(p);
console.dir(p);

console.clear();

// Grouping together
dogs.forEach(dog => {
  console.groupCollapsed(`${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('Wes');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');

// timing
console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
  .then(data => data.json())
  .then(data => {
    console.timeEnd('fetching data');
    console.log(data);
  });

console.table(dogs);

</script>
</body>

真不吃香菜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 09 — Console Tricks

学会各种调试技巧。知识点参考：Day09 - Console 调试各种姿势指南<body><p onClick="makeGreen()">×BREAK×DOWN×</p><script>const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];function makeGreen() { const p = document.querySelector('
复制链接

扫一扫