首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用VSCode WSL Remote,为什么Chrome Debugger不能启动Chrome for Windows?

使用VSCode WSL Remote时,由于Chrome Debugger需要与Chrome for Windows进行通信,所以可能无法直接启动Chrome for Windows。这是因为WSL(Windows Subsystem for Linux)环境和Windows环境是相互隔离的,无法直接访问Windows的图形界面应用程序。

解决这个问题的一种方法是使用WSL上的文本浏览器来模拟Chrome的功能。一个常用的文本浏览器是lynx,可以在WSL中使用命令行安装。

另一种解决方案是安装X Server来实现WSL和Windows图形界面的交互。可以使用Xming或VcXsrv等X Server软件在Windows上安装一个X Server,并在WSL中通过设置DISPLAY环境变量将图形界面显示在Windows上。在WSL中,通过命令行启动Chrome时,可以使用"google-chrome"命令,然后通过X Server将Chrome的界面显示在Windows上。

当然,对于在WSL中开发前端应用程序时需要使用Chrome Debugger的情况,建议在本地Windows环境中安装并使用VSCode,这样可以直接启动并调试Chrome for Windows,以获得更好的开发体验和性能。

推荐的腾讯云相关产品和产品介绍链接地址:暂无。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 让你 nodejs 水平暴增的 debugger 技巧

    狼叔说过,是否会使用 debugger 是区分一个程序员 nodejs 水平的重要标志。 本文分享一下 debugger 的原理和 vscode debugger 的使用技巧。...launch 这样先通过 node --inspect-brk 启动 debugger server,然后再添加 vscode debug 配置来连接上太麻烦了,能不能把这两步合并呢?...主进程启动的时候,通过 --remote-debugging-port 来指定子进程自动的时候的 debugger server 的端口。 ?...调试 nodejs 代码更多还是使用 vscode debugger(当然有的时候也会使用 chrome devtools 调试,基于 chrome devtools 的 memory 来进行内存分析,...希望这篇文章能够帮助大家了解 debugger 的原理,并且能够使用 chrome devtools 或者 vscode debugger 来调试 nodejs 代码。

    1.1K10

    Vue笔记:使用 VS Code 断点调试

    直接在 Chrome 的调试窗口中调试 Vue 代码有诸多不便, 好在 Visual Studio Code 中提供了 Debugger for Chrome 插件,能够通过配置直接在 VS Code...1.开启 Chrome 远程调试端口 首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS Code 才能 attach 到 Chrome 上。...Windows 右键点击 Chrome 的快捷方式图标,选择属性 在目标一栏,最后加上 --remote-debugging-port=9222,注意要用空格隔开 macOS 打开控制台 执行命令..., 然后在搜索框输入Debugger for Chrome 并安装插件,再输入,安装完成后点击 reload 重启。...通过第一步的方式以远程调试打开的方式打开 Chrome 2. 在 vue 项目中执行 npm run dev 以调试方式启动项目 3.

    2.9K20

    WSL中vscode修改文件名报错Unable to movecopy

    正常使用 Windows 开发,在部署编译的时候因为大小写问题报错,想安装一个 WSL Debian 系统,在里面编译一下试试,可以正常编译。...在修改一个文件夹的大小写时,报了下面的错误: Unable to move/copy 'vscode-remote://wsl+debian/mnt/d/lib/packages/src/Line-chart...' because target 'vscode-remote://wsl+debian/mnt/d/lib/packages/src/line-chart' already exists at destination...不能修改,那只能用命令来修改了,常见的方法有两种: 强制移动/复制 使用 mv 或 cp 命令,并使用 -f 选项来强制执行。...PC端还是移动终端打开的 分享一些实用的Chrome DevTools技巧 JetBrains IDE Support 浏览器自动刷新插件(不定时更新)

    42310

    把 puppeteer 融入调试流程,调试体验爽翻了!

    首先,react 项目我是通过 vscode debugger 来调试的: 在 .vscode > launch.json 的调试配置文件里新增一个 chrome 类型的调试配置,输入调试的 url。...Chrome DevTools 对接了 CDP 可以调试网页,我们用 VSCode Debugger 能调试网页同样也是对接了 CDP。...这俩都需要浏览器在调试模式启动,也就是指定 remote-debugging-port。...既然 puppeteer 和调试都要以调试模式跑浏览器,那我们就等 puppeteer 跑起 chrome 之后,vscode debugger 再 attach 上它来调试。...这俩其实完全可以结合在一起用,因为他们都是基于 CDP,会启动一个调试模式的浏览器。只要 VSCode Debugger attach 到 puppeteer 启动的浏览器就好了。

    1.1K20

    关于 Node.js 调试,你需要了解的一切

    使用 Chrome 调试 Node.js 应用 使用—inspect 标志启动 Node.js V8 检查器: node --inspect index.js (nodemon 也支持此标志。)...打开 Chrome 网络浏览器(或者其他基于 Chromium 内核的浏览器),并在地址栏中输入 chrome://inspect: 几秒后,您的 Node.js 应用就会显示为 Remote Target...如果您正在运行 Web 应用程序,可在任意浏览器中打开,VS Code 会在遇到断点或 debugger 语句时停止执行: VS Code 调试方法与 Chrome DevTools 中的 Variables...编辑器将启动配置存储在项目中隐藏的.vscode 文件夹内的 launch.json 文件。...接入远程服务器上运行的应用 Remote - WSL: 接入运行在 Windows 上 Linux in WSL 中的应用 Node.js 的其他调试选项 参考 Node.js 调试指南:https:

    46920

    知乎分享:vscode从入门到进阶

    的优势 特点:开源、跨平台、轻量级、内置git支持、丰富的插件 你真的会用VS Code吗 快捷键 VSCode shortcut for windows 常见命令: Ctrl+Shift+P或F1:调出命令面板...DAP 希望将编辑器与调试器解耦合,便于编辑器与其他Debugger的集成 VSCode是如何做开源的 开源的三个阶段:公开源代码->Issues&PRs->Planning&Design 实时更新,管理...远程开发 VSCode Remote,允许将容器/远程计算机/WSL作为完整的开发环境。...相关插件包括: Remote - SSH Remote - Containers Remote - WSL 其中,Remote - SSH就很方便,可以通过SSH channel连接上远程计算机,访问远程文件夹进行开发...插件推荐 GitLens:Git管理利器 REST Client:也许比Postman更好 Bracket Pair Colorizer:括号颜色高亮,我觉得可以 Browser Preview:把Chrome

    1.9K10

    关于vscode断点调试

    很多人习惯在 Chrome 的调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体。个人还是更加习惯于断点调试。...设置 Chrome 远程调试端口 首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS Code 才能 attach 到 Chrome 上: Windows 右键点击 Chrome 的快捷方式图标.../Contents/MacOS/Google\ Chrome –remote-debugging-port=9222 Linux 打开控制台执行: google-chrome –remote-debugging-port...=9222 Visual Stuido Code 安装插件 点击 Visual Studio Code 左侧边栏的扩展按钮, 然后在搜索框输入Debugger for Chrome并安装插件,再输入...在 vue 项目中执行npm run dev以调试方式启动项目 点击 VS Code 左侧边栏的调试按钮,选择 Attach to Chrome 并点击绿色开始按钮,正常情况下就会出现调试控制条。

    1.9K20

    软件测试|selenium复用已打开浏览器

    便于我们在终端任意位置启动浏览器 终端中使用命令行,打开浏览器debug模式 代码中创建driver时,添加debugger_address设置 以Chrome浏览器为例,设置步骤如下: 将浏览器启动方式添加到环境变量...找到浏览器启动位置所在文件夹的路径 windows 右键点击Chrome浏览器快捷方式-属性-目标,目标中的值即为Chrome浏览器位置 图片 mac mac中Chrome浏览器通常为: /Applications...:Google\ Chrome 打开浏览器debug模式 关闭所有chrome浏览器的进程后,终端输入debug命令: 命令格式:浏览器名称 --remote-debugging-port...=端口号 例: windows:chrome --remote-debugging-port=9222 mac:Google\ Chrome --remote-debugging-port=9222 在代码中添加...options = Options() options.debugger_address = 'localhost:9222' driver = webdriver.Chrome(options=

    1.5K10

    VS Code 折腾记 - (7) 内置Debug功能深入【调教angular-cli 最新版】

    前言 很多小伙伴说用了打包工具(Webpack)之后,断点调试相当痛苦; 常规的方式无非是debugger,console.log()大法; 但是,vscode这货天生支持debug功能,不用白不用,今天我就说说怎么调教...Chrome Debugger protocol....简言之:就是让你的代码在chrome上调试,为什么vscode不集成这个,可能控制体积大小什么的。。...两种,具体看官方文档 url:这个是chrome插件带的,指定访问的链接 webRoot:也是chrome插件带的,指定根目录或者执行文件 ${workspaceRoot}:就是你打开vscode读取的项目目录...sourceMaps:默认是启用的,对于打包的调试,小伙伴们必须开启 userDataDir:临时目录,专门保存调试过程产生的东西 ---- 启动调试 正确的情况下就会弹窗一个新的chrome页面,

    1.1K20

    WSL运行Chrome Headless模式

    前言 Google Chrome早就支持了headless模式,但一般都是在Linux上运行,而我则习惯于在WSL上开发,折腾了好久终于找到了可以在WSL上跑headless模式的方法。....deb $ which google-chrome /usr/bin/google-chrome 使用Chrome Headless访问网页 使用 官方文档的方法打开Chrome: $ google-chrome...命令行增加--remote-debugging-port=9200参数启动Chrome后,打印出以下信息: [0829/194236.072838:ERROR:browser_main_loop.cc(...使用puppeteer提供的Chrome 无意中发现,puppeteer中提供的Chrome竟然可以在WSL中开启调试端口并正常访问。...总结 安装依赖库,包括中文字体库 使用puppeteer提供的Chrome版本 完整的启动命令行:chrome --no-sandbox --headless --no-gpu --disable-setuid-sandbox

    4.5K31

    VsCode 各场景高级调试技巧,有用!

    下面以在VsCode中快速调试一个Node项目为例,演示断点的基本使用。...image.png 按F5可以正常唤起chrome浏览器,并在vscode的ts源码处会有debug效果 调试Vue项目的两种方式 下面介绍两种调试vue2项目的3种方法,其他框架的调试也类似: 不使用...vscode插件Debugger for chrome的方法 初始化vue项目,配置vue.config.js,指定要生成sourceMaps资源 module.exports = { configureWebpack...借助vscode插件Debugger for Chrome在Chrome中调试 第一步还是初始化vue项目,添加vue.config.js文件配置,指定要生成sourceMaps资源 module.exports...借助vscode插件Debugger for Firfox在Firefox中调试 和Debugger for Chrome基本一样,区别在于安装Debugger for Firfox插件,并在launch.json

    1.2K20

    分享 10 多条超有用的 VsCode 各场景高级调试技巧

    下面以在VsCode中快速调试一个Node项目为例,演示断点的基本使用。...image.png 按F5可以正常唤起chrome浏览器,并在vscode的ts源码处会有debug效果 调试Vue项目的两种方式 下面介绍两种调试vue2项目的3种方法,其他框架的调试也类似: 不使用...vscode插件Debugger for chrome的方法 初始化vue项目,配置vue.config.js,指定要生成sourceMaps资源 module.exports = { configureWebpack...借助vscode插件Debugger for Chrome在Chrome中调试 第一步还是初始化vue项目,添加vue.config.js文件配置,指定要生成sourceMaps资源 module.exports...借助vscode插件Debugger for Firfox在Firefox中调试 和Debugger for Chrome基本一样,区别在于安装Debugger for Firfox插件,并在launch.json

    1.8K40
    领券