Chrome 73 DevTools 新功能之 Logpoints

前言

今天早上 Chrome 更新到 73 版本，其中 Logpoints 对于常用 console.log 的开发者来说，有较大的便捷性。

版本说明

本篇文章提到的 Chrome 73 的版本为： 73.0.3683.75（正式版本）（32 位）。

什么是 Logpoints

简单来说， Logpoints 是使用类似断点的方式，来实现控制台的输出。

Logpoints 的优势

减少调试代码，提高代码的整洁性。
直接在面板添加 控制台输出，调试更加方便。
线上的网站也可以直接添加 控制台输出。

Logpoints 如何使用

在 Sources 面板找到需要添加 控制台输出 的代码，这里我列举输出 img 常量；
右击当前代码的行数，在菜单中选择 Add logpoint... ;
在弹出的输入框中，输入 输出信息 然后回车，这里我输出 img 常量；
刷新页面，就可以在控制台看到输出信息了。

总结

个人感觉 chrome 73 中的 Logpoints 对于调试来说有两点很方便：

避免了在代码中添加 console.log ，然后返回浏览器刷新页面，最后又返回编辑器删除 console.log 这个复杂步骤。
查看线上的网站时，也可以通过 Logpoints 来输出信息，方便调试代码的运行情况。

Chrome 73 DevTools 新功能之 Logpoints相关推荐

chrome扩展官方文档（中文版）—— chrome 扩展的新功能
传送门:chrome扩展官方文档(中文版) 原文地址:What's new in Chrome extensions Chrome扩展有什么新功能发布于 2021 年 2 月 25 日,星期四 • ...
chrome 90的新功能（new feature in chrome 90）
突然发现chrome又可以升级了,这次升级到chrome 90,我们看一下chrome 90带来的新功能. https://www.windowslatest.com/2021/04/14/whats ...
谷歌浏览器检查功能_谷歌Chrome浏览器添加新功能，爱”吃“内存有应对之策？...
谷歌Chrome浏览器是Windows上占用资源最多的应用程序之一,如果安装扩展程序或打开过多的选项卡,其将占用更多的内存.据悉,目前Google Chrome Canary内部版本对一项新功能进行了 ...
Chrome 开发者工具新功能-网络面板新增载荷（Payload）边栏
最近开发发现 Chrome 开发者工具里网络请求参数信息被放到了Payload一栏里,感觉可以,查找信息更方便了些官方新功能介绍文档: https://developer.chrome.com/zh ...
谷歌测试Chrome浏览器书签新功能Google Stars
谷歌正在测试Chrome浏览器一项"书签"新功能,即允许用户保存邮件.网页.图片等内容,并可以在此后通过搜索查看,甚至分享. 这项新功能是由德国一位名叫Florian Kiersc ...
[译] Chrome 73 开发者工具新特性
原文:What's New In DevTools (Chrome 73) 作者:Kayce Basques 发表时间:January 22, 2019 译者:西楼听雨发表时间: 2019/01/2 ...
火狐浏览器mac_Firefox火狐浏览器73.0版本发布，有哪些期待已久的新功能？
在谷歌浏览器发布Chrome 80版本几天后,2月11日,Mozilla也发布了Firefox火狐浏览器的最新版本73.0稳定版.目前,Firefox 73.0已面向Windows.Mac.Linux ...
2021 Chrome Devtools 新特性
目录基础教程新特性哪里来的 Chrome 96 Chrome 95 1. CSS的长度单位可直接更换 Chrome 94 1. 支持更换80种语言 2. 设备列表新增Nest Hub 设备 3. ...
Chrome谷歌浏览器新功能删除主题更方便
Chrome谷歌浏览器新功能删除主题更方便根据报道,不久前xx Chrome可以改变浏览器界面的颜色,现在Chromium Team又增加了一个功能,就是可以从New Tab Page(新标签页 ...