【F12工具的使用(1)】提高前端开发效率,如何同时查看network和console页面?菜鸟必看,20201221更新move to bottom

        在前端开发过程中,尤其是调试接口的时候,需要同时查看接口的请求状态和控制台打印信息。

但是在两个页面来回切换影响效率,所以菜鸟们,在调试接口的时候尽量选择同时查看两个部分的信息。

(1)工具:谷歌浏览器。

(2)方法:

        (a) 打开f12,点击右上角的三个点。

【F12工具的使用(1)】提高前端开发效率,如何同时查看network和console页面?菜鸟必看,20201221更新move to bottom_第1张图片

(b)选择 “More Tools”

【F12工具的使用(1)】提高前端开发效率,如何同时查看network和console页面?菜鸟必看,20201221更新move to bottom_第2张图片

(c) 在选项中随便选一个,

【F12工具的使用(1)】提高前端开发效率,如何同时查看network和console页面?菜鸟必看,20201221更新move to bottom_第3张图片

(d)然后,你就会发现,这个页面有两个模块,并且,无论你在步骤(c)选择什么,都会有console这个工具,不妨自己动手试一下。

【F12工具的使用(1)】提高前端开发效率,如何同时查看network和console页面?菜鸟必看,20201221更新move to bottom_第4张图片

总结,虽然这是一个很简单的东西,但是我在最初入行的时候还真就不知道,希望对大家有用处。


一年过去了,我还是很菜

今天在研究一个bug, 想同时看element和 sources中的js代码

原来可以这样,在想要移到底部的tab上面右键,又一个选项 move to bottom ,这样就可以同时查看了

【F12工具的使用(1)】提高前端开发效率,如何同时查看network和console页面?菜鸟必看,20201221更新move to bottom_第5张图片

你可能感兴趣的:(工具使用,f12,前端开发,提升效率,控制台,接口调试)