学习资源推荐

 

将浏览器变成编辑器

内容可编辑

  • 打开控制台,输入以下代码,回车
    document.body.contentEditable=true
  • 你会发现,此时整个页面都是可编辑状态,想干什么随你!!
    你可能不知道的devtools_js+css

清除控制台

  • 直接调用函数clear()
  • 效果如下

你可能不知道的devtools_js+css_02

结构化输出

console.log() 你一定是熟悉的
console.table() 可还行?


  • 示例代码
var users=[
	{id:1,name:"react"},
	{id:2,name:"vue"},
	{id:3,name:"angular"}
]
 console.log(users)
  • 输出是这样的
    你可能不知道的devtools_js+css_03

  • 内部情况你需要手动展开查看
    你可能不知道的devtools_你可能不知道的devtools_04

  • 使用console.table(users)
    你可能不知道的devtools_js+css_05

  • 效果相信你已经清楚了

  • 补充一点,这个函数可以传第二个参数,要显示的序列

  • console.table(users,[“name”])
    你可能不知道的devtools_js+css_06