前端调试技巧-谷歌浏览器&VSCODE

最新推荐文章于 2024-07-25 15:46:21 发布
最新推荐文章于 2024-07-25 15:46:21 发布
阅读量1.2k 收藏
点赞数
分类专栏： 调试技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/young_Emily/article/details/79056111
版权
本文介绍了如何让谷歌浏览器控制台变得美观，并推荐了几个前端调试插件，如React Developer Tools、Redux DevTools和Vue.js devtools，提升前端开发者调试效率。同时，提供了一些JavaScript调试的实用技巧链接供参考。
摘要由CSDN通过智能技术生成

先立个flag，等会来填坑

首先让控制台美美的：
控制台主题插件：
DevTools Theme: Obsidian Snake
这里写图片描述

食用指南：

这里写图片描述

这里写图片描述
安装好插件之后，设置允许替换主题然后再打开控制台即可起效。

配合调试插件调试：
1. React Developer Tools

最低0.47元/天 解锁文章
young_Emily
关注
专栏目录
前端学习笔记 - 移动端Web开发
fengxm0309的博客
10-18 1066
移动端基础 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样 兼容移动端主流浏览器，处理Webkit内核浏览器即可
让你能够在VSCode编辑器打一个真实的浏览器进行预览并调试
08-08
让你能够在VSCode编辑器打一个真实的浏览器进行预览并调试
史诗级更新，VSCODE 可无缝调试浏览器了！
azl397985856的专栏
07-30 998
2021-07-16 微软发布了一篇博客专门介绍了这个功能，VSCODE 牛逼！在此之前，你想要在 vscode 内调试 chrome 或者 edge 需要借助于 Chrome Debug...
VSCode设置默认打开浏览器
最新发布
Cwcgirl的博客
07-25 920
1、选择目标浏览器打开设置，此处以谷歌浏览器为例子，chrome://settings/2、设置该浏览器为默认浏览后，vscode打开网页默认为谷歌。
Vscode调试前端代码
记录开发的点点滴滴
07-21 2586
1、安装插件Debugger for Chrome 2、修改 config/index.js 3、点击vscode左边小齿轮，选择chrome，自动生成配置文件 launch.json文件配置修改如下： 4、设置断点，调试代码 断点可以设置在chrome，也可以在代码里加入debugger 参考文献：https://juejin.im/post/5c0e6142e51d45393b3c3bb0 ...
VSCode调试Html中的脚本 vscode前端常用插件推荐，搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for...
12-13 3457
一、背景 使用VisualStudioCode写了一个简单的Html页面，想调试下其中script标签里的javascript代码，网上查了一通，基本都是复制粘贴或者大同小异的文章，就是要安装Debugger for Chrome插件，修改launch.json配置信息，F5启动，这些都照做了，但是仍有两个问题，一个是Html文件里不能打断点，只能在js文件里面打，二...
在 Vscode 编辑器里调试浏览器网页
我有很多的问号的博客
03-15 885
在 Vscode 编辑器中可以进行调试，打断点、监控变量等可以方便辅助我们日常开发。
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4731
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
VSCode插件大全｜VSCode高级玩家之第二篇
web17886480312的博客
03-09 494
上一篇文章《VSCode常用快捷键大全》，我们了解到了VSCode中的常用快捷键。学会了快捷键可以让我们更高效和迅速的编写代码。但是没有IDE中的一些辅助功能，还是美中不足。 VSCode没有安装插件，就等同于一把枪没有安装配件，打把的时候还是缺失精准度，开枪的时候也会有很重的后坐力。当然没有插件，也可以很好的编写代码，就是没有那么强而已。 所以这篇文章会给大家介绍VSCode中最常用的插件，让我们的编辑器加上一双翅膀，让我们在编写代码的过程中如虎添翼的感觉。 ??所有插件，只要搜索插件名就能找到哦！ .
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
vscode调试 vue等前端源码调试
中老年程序员
01-30 2052
假设你已经有一份vue3源码，并且依赖安装完毕。如果没有安装pnpm 请自行搜索全局安装pnpm，然后vue3的项目中安装依赖是 pnpm install。2、在打开的调试侧边栏中点击属性设置按钮，如下图所示的顺序2，这时会弹出launch.json配置文件。1、直接在vscode中点击最左侧的调试按钮 一般有个小虫子形状。4、最后点击调试侧边栏上方的调试启动箭头，会以调试方式启动项目。3、在配置文件里修改你想要启动项目的地址，如下图顺序3。
VSCode 竟然可以无缝调试浏览器了！
u012384510的博客
08-01 1422
大家好，我是若川。今天周末，分享一篇相对比较简单的文章。学习源码系列、面试、年度总结、JS基础系列。2021-07-16 微软发布了一篇博客专门介绍了这个功能，VSCode 牛逼！在此之前...
vs code 简易使用教程（前端）
supming1的专栏
10-01 3万+
一、常用设置： 1、设置tab为2空格 用户首选项 =》 设置 => 直接搜索editor.tabSize 设置为2 2、设置换行采用\n形式 用户首选项 =》 设置=> 直接搜索files:eol进行设置为\n。 如果映是\r\n了，可以通过下图的方式进行转换 二、vs code 常用插件 安装方法：点击vscode左侧扩展，搜索插件，点击安装 Path In...
常用的vscode的插件&谷歌浏览器插件&vscode使用方法
H.千面的博客
07-31 1740
1、汉化：Chinese 2、View in Browser GitLens 3、eslint，git history，auto inport 4、框架类vue vutur，react/redux，es6/es7
vscode添加默认谷歌浏览器
u011402106的博客
07-22 1651
打开vscode编辑器，打开“扩展（ctrl+shift+X）”调出扩展，输入关键字“open in browser ”，找到对应插件，并点击“安装”，安装完成后，打开vscode编辑器的设置（ctrl+,）,在输入框中，输入关键词“open in browser”，找到对应的配置项，在配置项的输入框中（Set default browser）中，输入“Google Chrome ”即可。
VSCode和谷歌浏览器的常用插件
chonger_feifei的博客
03-02 683
VSCode和谷歌浏览器的常用插件
在vscode中按F5打开chrome浏览器 初始样式 插件不见了 没有 插件 自己的配置 用户配置
scdnplayer的博客
01-16 978
在vscode中按F5打开chrome浏览器 初始样式 插件不见了 没有 插件 自己的配置 用户配置
vscode常用插件
weixin_44671184的博客
04-20 61
1.Auto Close Tag (必备) 自动闭合HTML/XML标签 2.Auto Rename Tag (必备) 自动完成另一侧标签的同步修改 3.Beautify (必备) 格式化 html ,js,css Prettier 格式化JavaScript / TypeScript / CSS 4.Bracket Pair Colorizer (必备) 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 5.Debugger for Chrome (推荐) 映射vs
提升Web前端开发效率：谷歌浏览器调试工具与Java调试详解
课程目标包括理解调试工具的价值，如提高页面开发效率，快速定位和解决问题，特别是利用谷歌浏览器的JavaScript（JS）调试工具，其功能强大且具备在控制台实时编写并查看方法的特点，这是许多现代集成开发环境（IDE...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值