XFE 技术 生活 笔记 文集

JavaScript输出——基础调试方式

🔖 前端技术 👀 39 🕒 2019-04-18 👨‍🎓 XFE/Peter

JavaScript 的输出方式,是一种比较简单的Web开发的调试方法。不同的调试方法都有自己适用的调试方式。
同时,某些输出方式也是目前SPA,渲染页面的基础接口

弹窗

window.alert('弹窗显示内容');

弹窗会阻塞javascript的运行,直到弹窗的关闭

弹窗现在一般用于服务端渲染的后台框架提示,移动端页面调试等地方的使用

写入内容到HTML文档

document.write('写入文档内容');

如果在文档加载之前写document.write(),浏览器会根据顺序依次(可以有多个docuemnt.write())将内容渲染到body中间,

如果在文档 onload(文档所有文本资源加载并渲染完成)之后再执行document.write(),将会覆盖body中原有的内容,

将内容写入到HTML元素

document.body.innerHTML = '写入元素的内容'

此操作将覆盖指定元素里面的所有内容,

很多异步加载数据前端渲染的时候,也有很多使用这个接口来渲染页面的。

控制台输出

推荐DevTools(chrome),拥有它,前端开发奖从原始社会进入现代社会,

  • 输出普通日志信息(黑色)
console.log('this is log message')
  • 输出错误日志(红色)
console.error('this is error message')

这个控制台接口,可以追踪JavaScript错误的堆栈信息。

  • 输出警告信息(黄色)
console.warn('this is warn message')
  • 输出一段代码的运行时间
console.time('timeLog')

console.timeEnd('timeLog')

一般在测试一段代码运行效率的时候,这个接口用来做一个时间统计,为优化代码做一个参考。