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

当连接到远程工作区时,为什么localhost不能在我的VS代码的webviews中工作?

当连接到远程工作区时,localhost无法在VS代码的webviews中工作的原因是,远程工作区是在远程服务器上运行的,而不是在本地机器上运行。因此,当在webviews中尝试访问localhost时,它实际上是在远程服务器上寻找本地主机,而不是本地机器上的本地主机。

为了解决这个问题,可以使用远程开发工具或插件来代替在webviews中使用localhost。这些工具和插件可以帮助在远程服务器上运行和调试应用程序,而无需访问本地主机。

对于VS代码,可以考虑使用以下远程开发工具或插件:

  1. Remote - SSH:该插件允许通过SSH连接到远程服务器,并在远程服务器上运行和调试应用程序。您可以在VS代码的扩展商店中找到该插件。
  2. Remote - Containers:该插件允许使用Docker容器作为远程开发环境。您可以在本地机器上创建一个包含所需开发环境的Docker容器,并在远程服务器上运行该容器。这样,您可以在webviews中使用容器的网络地址来访问应用程序。
  3. Remote - WSL:该插件允许使用Windows Subsystem for Linux(WSL)作为远程开发环境。您可以在WSL中设置和运行应用程序,并在webviews中使用WSL的网络地址来访问应用程序。

通过使用这些远程开发工具或插件,您可以在远程工作区中使用webviews,并通过远程服务器上的网络地址来访问应用程序,而不是使用localhost。这样可以解决localhost无法在VS代码的webviews中工作的问题。

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

相关·内容

Webview 为 VSCode 开启了一扇门,安全限制却又把它关上了

Webviews can also be used to build complex user interfaces beyond what VS Code’s native APIs support....让VS Code 插件能够通过渲染 HTML 来创建复杂 UI,而不仅限于其 API 支持,这种灵活性让插件有了更多可能性: This freedom makes webviews incredibly...,用来完成一些清理工作,如停掉 timer 特殊,Webview 进入后台内容会被销毁,再次可见重新创建这些内容: The contents of webviews however are created...getState等 API 需要注意是,通过setState()保存状态会在 Webview 面板关闭销毁(而持久化保存): The state is destroyed when the webview...setState保存状态 webviewPanel.webview.html = restoreMyWebview(state); } } ); 如此这般,VS Code 就能在重启后自动恢复

5.3K30

Azure机器学习 - 使用与Azure集成Visual Studio Code实战教程

1.3 VS Code 建立连接 如果你选择其中一个点击式体验,系统会打开一个新 VS Code 窗口,并尝试连接到远程计算实例。在尝试建立此连接,将执行以下步骤: 授权。...此选项仅连接到计算实例,不会连接到工作其他实例。使用此选项,你不会在 VS Code 中看到自己工作文件。...三、在远程接到计算实例 VS Code 工作(预览版) 3.1 设置远程连接 IDE VS Code 有多个扩展,可以帮助你实现机器学习目标。...还可以在订阅中固定你最常使用工作。 应自动将你从中启动 VS Code 远程连接工作(计算实例所在工作)设置为默认工作。可以从 VS Code 状态栏更新默认工作。...此操作将创建 VS Code 专用内核会话。这些特定于 VS Code 会话只能在 VS Code 中使用,并且必须在 VS Code 中进行管理。

24520
  • 如何在WSL下使用VS Code

    ,它为软件开发人员开辟了一条新编写代码途径。...因此,要使用我们本地计算机(例如笔记本电脑)连接到远程Linux计算机,我们需要: 在远程Linux机器上运行X Client应用程序 在本地计算机上运行X Server应用程序 远程X客户端与本地X...我们也可以在 ~/.bashrc添加这个命令, 这样我们每次登录就都不需要再重复这样工作了<g class="gr_ gr_9 gr-alert gr_tiny gr_gramm gr_inline_cards...IP信息,因为我们在本机执行该命令,所以使用<em>的</em>是<em>localhost</em>,如果你使用<em>的</em>是<em>远程</em>计算机,请改掉<em>localhost</em>部分 安装<em>VS</em> Code 现在,我们可以下载<em>VS</em> Code并安装到Ubuntu上。...<em>为什么</em><em>不</em>直接在Windows上使用VirtualBox或VMware等虚拟机或者使用其他Linux机器?当然,大多数情况下这些方式没有问题,但在某些个别情况下,这样<em>的</em>方式并不适用。

    2.5K40

    使用VS Code进行远程开发

    相反,使用Remote-SSH扩展,你只需连接到虚拟机,安装必要扩展(如Python),然后就可以利用VS Code所有优秀特性,如智能感知(完成)、代码导航和调试,就像你在本地工作一样。...VS Code在工作中找到一个devcontainer.json文件,它会自动构建(如果有必要的话)该镜像,启动容器,并连接到它。...管理扩展 在进行远程开发VS Code将根据自身公开功能尝试推断在何处安装扩展,本地还是远程。扩展可分为两类: UI扩展在本地安装。...这些扩展只自定义UI,访问工作文件,这意味着它们可以完全在本地机器上运行。由于它们是在本地安装,所以你始终可以独立于工作空间来使用它们。UI扩展例子有主题、代码片段、语言语法和键映射。...工作扩展是远程安装。它们访问工作需要编辑文件和文件夹,以提供智能感知(完成)、GoTo定义、调试等等。这些扩展可以自定义UI。

    4.2K10

    Visual Studio Code 1.76 发布

    辅助功能改进 - 新音频提示,改进终端屏幕阅读器模式。 一个命令在集成了 shell 终端以 non-zero code 退出,会发生故障。...以查看所有内核,这将按内核来源分组(例如:Jupyter 内核、Python 环境等)。 Markdown header link 建议 - 轻松链接到整个工作中文件 headers。...首先,只需在 Markdown link 输入##,即可查看当前工作中所有 Markdown headers 列表: 然后选择其一 值得注意是,在当前工作查找所有 headers 成本可能很高...,因此第一次请求可能会有轻微延迟,尤其是对于包含大量 Markdown 文件工作。...减少了远程扩展对远程菜单贡献,以便一目了然地查看连接到远程窗口所有操作。

    41420

    不是吧?阿sir!周末你就不学习了吗?

    工作原理大概如下(搬运): IDE(如phpstorm)已经集成了一个遵循DBGpXdebug插件,开启它时候,会在本地开一个xdebug调试服务,监听在调试所设置端口上,默认是9000,这个服务会监听所有到...在phpstorm,位于:工具栏>run>Start / Stop Listening for PHP Xdebug Connetions 浏览器发送一个带XDEBUG_SESSION_START参数请求到服务器...xdebug.remote_host=localhost 远程主机监听端口 xdebug.remote_port=9000 开启回 xdebug.remote_connect_back = 1 开启...xdebug xdebug.remote_enable = 1 经过上面的描述,你应该大概了解到其实php调试是通过客户端、服务端经过DBGp协议通信来协调实现 这也是为什么php支持远程调试原因...,也没有关系,照样可以连接到我指定ip地址上,这不就出大问题了吗 利用条件 xdebug.remote_connect_back = 1 //开启回 并且此选项开启,xdebug会忽略xdebug.remote_host

    1.7K20

    最终还是选择了 VS code...

    兜兜转转,在开发工具方面还是选择了 VS Code,原因非常简单 -- 远程开发。 工作之后,开发平台慢慢就开始以 Linux 为主。...当然,前提是这款工具真的能够惊艳到我情况下,这一点 vs code 做到了,它在远程开发方面的确让惊艳了一把。 为什么选择 vs code?...IntelliJ 远程开发通过 FTP、SFTP (File Transfer Protocol,文件传输协议) 实现,它们远程开发原理是通过文件传输协议连接到远程服务器,通过上传和下载方式进行远程远程项目和本地项目的同步...而 vs code 是通过 SSH (Secure Shell) 方式连接到远程服务器,换句话说,vs code 在远程开发过程扮演角色更像是一款终端模拟工具,它不需要繁琐上传和下载步骤,而且实时性更好...在使用 Pycharm ,可以通过快捷键给代码添加上标签,当我们想回到某一个位置能够使用快捷键或者搜索方式快速定位到准确位置,这也是 Pycharm 吸引地方之一,它也养成了喜欢打标签习惯

    1.5K20

    一起来写 VS Code 插件:VS Code 版 CNode 已上线

    Webview API 允许扩展在 visualstudio 代码创建完全可定制视图,可以将 webview 看作是 VS Code iframe。...因此我们能在 extensions 开发出跟网页一样内容,但实现远比网页更强大功能。 效果 首先来看下实现效果 主要分为 2 部分,左侧是主题列表,右侧是主题详情。...状态保持 与浏览器标签不一样是, webview 移动到后台又再次显示,webview 任何状态都将丢失。因为 webview 是基于 iframe 实现。... webview 被隐藏,即使 webview 内容本身被破坏,这些状态仍然会保存。当然了, webview 被销毁,状态将被销毁。...希望这篇文章对大家有所帮助,也可以参考往期文章或者在评论交流你想法和心得,欢迎一起探索前端。

    2.4K10

    一起来写 VS Code 插件:VS Code 版 CNode 已上线

    Webview API 允许扩展在 visualstudio 代码创建完全可定制视图,可以将 webview 看作是 VS Code iframe。...因此我们能在 extensions 开发出跟网页一样内容,但实现远比网页更强大功能。 效果 首先来看下实现效果 主要分为 2 部分,左侧是主题列表,右侧是主题详情。...状态保持 与浏览器标签不一样是, webview 移动到后台又再次显示,webview 任何状态都将丢失。因为 webview 是基于 iframe 实现。... webview 被隐藏,即使 webview 内容本身被破坏,这些状态仍然会保存。当然了, webview 被销毁,状态将被销毁。...希望这篇文章对大家有所帮助,也可以参考往期文章或者在评论交流你想法和心得,欢迎一起探索前端。

    1.4K40

    解锁 VS Code 更多可能性,轻松入门 WebView

    所以可能很少有人会把 VS Code 和 WebView 联想到一起。 一、随处可见 WebView 但是相信,你一定在很多“有名” VS Code 插件接触过它(WebView)身影。...例如:内置 Markdown 扩展使用 WebViews 来呈现 Markdown 预览。WebViews 还可用于构建超出 VS Code 本机 API 支持复杂用户界面。...三、创建一个简单 WebView 从第一点例子你就应该可以体会到 WebView 功能拓展有多强大,它不仅可以作为自定义编辑器视图来扩展提供自定义 UI 以编辑工作任何文件。...总的来说 WebView 就像是在 VS Code 里 iframe,虽然可能在性能上有那么点弊端,但是却能够帮助我们实现很多丰富而又有趣事情。...比如:文件内容、文件和文件夹路径、用户和工作设置 WebView 有自己生命周期,如果在有极致体验场景下发挥他最大作用,建议去官网更加深入学习一下 最后最后,预告一下下一篇「VS Code」

    61660

    【腾讯云Cloud Studio实战训练营】使用Cloud Studio&Flutter完成跨平台博客搭建

    用户在使用CloudStudio 无需安 装,随时随地打开浏览器就能在线编程。 ?...2.3远程访问云服务器 Cloud Studio 支持您连接自己云服务器,这样就可以在编辑器查看云服务器上文件,进行在线编程和部署工作。...“空”,即添加任何代码。...7.2创建自定义模板 您处在当前项目 IDE ,您可以创建自定义模板: 这里Flutter 博客网站发布成模版。 (1)点击功能栏“文件”,在下拉选项中选择“发布自定义模板”; ?...兼容 VS Code 插件:若默认配置无法满足需求,可以在线安装 VS Code 插件来增强使用体验。 持久化和快速加载:随开随写,随时保存,再也无需担心断电未保存,浪费您每一份灵感。

    43260

    Win 平台做 Python 开发最佳组合

    使用 Windows 系统一大好处是它应用太丰富了,甚至强大 GPU 也能在闲暇时间做点其它「工作」。...Code 发现并安装 Python 扩展 编写简单 Python 应用程序 了解如何在 VS Code 运行和调试现有 Python 程序 将 VS Code 连接到 Git 和 GitHub,与全世界分享你代码...工作设置为 VS Code 提供了极大灵活性,工作设置会在整篇文章中提到。工作设置以.json 文件形式存储在名为.vscode 项目工作本地文件夹。...键入代码VS Code 会对 for 和 if 语句下面的行进行自动、适当缩进,添加右括号,并给出内容提示。 运行 Python 代码 现在代码已经完成,你可以运行它了。...以下是创建方程式 eval 库项目: ? Visual Studio Code 打开文件夹,它还会再次打开上次打开文件(这是可配置)。你可以打开、编辑、运行和调试列出任何文件。

    4.3K50

    在 Windows上写 Python 代码最佳组合!

    使用 Windows 系统一大好处是它应用太丰富了,甚至强大 GPU 也能在闲暇时间做点其它「工作」。...Code 发现并安装 Python 扩展 编写简单 Python 应用程序 了解如何在 VS Code 运行和调试现有 Python 程序 将 VS Code 连接到 Git 和 GitHub,与全世界分享你代码...工作设置为 VS Code 提供了极大灵活性,工作设置会在整篇文章中提到。工作设置以.json 文件形式存储在名为.vscode 项目工作本地文件夹。...若要查看 IntelliSense,请直接键入此代码而不要剪切和粘贴,你应该看到如下内容: 键入代码VS Code 会对 for 和 if 语句下面的行进行自动、适当缩进,添加右括号,并给出内容提示...以下是创建方程式 eval 库项目: Visual Studio Code 打开文件夹,它还会再次打开上次打开文件(这是可配置)。你可以打开、编辑、运行和调试列出任何文件。

    5.2K20

    当然是用官方MS Terminal和VS Code了

    使用 Windows 系统一大好处是它应用太丰富了,甚至强大 GPU 也能在闲暇时间做点其它「工作」。...Code 发现并安装 Python 扩展 编写简单 Python 应用程序 了解如何在 VS Code 运行和调试现有 Python 程序 将 VS Code 连接到 Git 和 GitHub,与全世界分享你代码...工作设置为 VS Code 提供了极大灵活性,工作设置会在整篇文章中提到。工作设置以.json 文件形式存储在名为.vscode 项目工作本地文件夹。...键入代码VS Code 会对 for 和 if 语句下面的行进行自动、适当缩进,添加右括号,并给出内容提示。 运行 Python 代码 现在代码已经完成,你可以运行它了。...以下是创建方程式 eval 库项目: ? Visual Studio Code 打开文件夹,它还会再次打开上次打开文件(这是可配置)。你可以打开、编辑、运行和调试列出任何文件。

    4.7K20

    Windows上写 Python 代码王炸组合!

    使用 Windows 系统一大好处是它应用太丰富了,甚至强大 GPU 也能在闲暇时间做点其它「工作」。...Code 发现并安装 Python 扩展 编写简单 Python 应用程序 了解如何在 VS Code 运行和调试现有 Python 程序 将 VS Code 连接到 Git 和 GitHub,与全世界分享你代码...工作设置为 VS Code 提供了极大灵活性,工作设置会在整篇文章中提到。工作设置以.json 文件形式存储在名为.vscode 项目工作本地文件夹。...若要查看 IntelliSense,请直接键入此代码而不要剪切和粘贴,你应该看到如下内容: 键入代码VS Code 会对 for 和 if 语句下面的行进行自动、适当缩进,添加右括号,并给出内容提示...以下是创建方程式 eval 库项目: Visual Studio Code 打开文件夹,它还会再次打开上次打开文件(这是可配置)。你可以打开、编辑、运行和调试列出任何文件。

    4.9K20

    如何让计算机工作环境更便捷?几行简单命令即可

    作为一个喜欢便捷环境的人,总是喜欢改进工作方式,将日常枯燥过程变得「自动化」。在这篇文章将描述如何使环境更便于使用。...出于安全原因,远程服务器无法直接访问,这意味着它们只能由网关机器访问。 连接服务器基本方法是首先将 ssh 连接到网关,然后将 ssh 连接到服务器,每次连接都需要输入用户名和密码。...使用 ssh 连接到远程服务器常用方法是使用以下命令:ssh user@host,然后获得一个密码提示符。在这篇文章不会详细介绍 ssh 工作原理,只是利用 ssh 基本使用知识。...更多便捷技巧 保持 SSH 打开 如果你已经使用隧道一段时间,你可能发现如果闲置几分钟后,隧道往往在工作都会断开连接。如果你同时在处理好几件事,而没有一直使用隧道,那这个重复连接工作真的很烦人。...你可以在自己计算机上编写代码,在远程服务器上运行代码,或者在远程服务器上完全同步整个存储库。 interlliJ 界面会不时变化,但主题不变。将介绍特定版本 - V. 2018.1.4 步骤。

    60410

    Win 平台做 Python 开发最佳组合:MS Terminal 和 VS Code

    作者:Jon Fincher 来源:机器之心 使用 Windows 系统一大好处是它应用太丰富了,甚至强大 GPU 也能在闲暇时间做点其它「工作」。...Code 发现并安装 Python 扩展 编写简单 Python 应用程序 了解如何在 VS Code 运行和调试现有 Python 程序 将 VS Code 连接到 Git 和 GitHub,与全世界分享你代码...工作设置为 VS Code 提供了极大灵活性,工作设置会在整篇文章中提到。工作设置以.json 文件形式存储在名为.vscode 项目工作本地文件夹。...键入代码VS Code 会对 for 和 if 语句下面的行进行自动、适当缩进,添加右括号,并给出内容提示。 运行 Python 代码 现在代码已经完成,你可以运行它了。...以下是创建方程式 eval 库项目: ? Visual Studio Code 打开文件夹,它还会再次打开上次打开文件(这是可配置)。你可以打开、编辑、运行和调试列出任何文件。

    4.5K50

    当然是用官方MS Terminal和VS Code了

    使用 Windows 系统一大好处是它应用太丰富了,甚至强大 GPU 也能在闲暇时间做点其它「工作」。...Code 发现并安装 Python 扩展 编写简单 Python 应用程序 了解如何在 VS Code 运行和调试现有 Python 程序 将 VS Code 连接到 Git 和 GitHub,与全世界分享你代码...工作设置为 VS Code 提供了极大灵活性,工作设置会在整篇文章中提到。工作设置以.json 文件形式存储在名为.vscode 项目工作本地文件夹。...键入代码VS Code 会对 for 和 if 语句下面的行进行自动、适当缩进,添加右括号,并给出内容提示。 运行 Python 代码 现在代码已经完成,你可以运行它了。...以下是创建方程式 eval 库项目: ? Visual Studio Code 打开文件夹,它还会再次打开上次打开文件(这是可配置)。你可以打开、编辑、运行和调试列出任何文件。

    4.5K20

    Git全栈开发者使用指南

    Untracked: 未跟踪, 此文件在文件夹, 但并没有加入到git库, 参与版本控制. 通过git add 状态变为Staged....我们这个分支是没有冲突,可能在合并过程中会出现冲突情况,可以通过 git status 查看冲突文件,手动解决冲突。当然,可以借助一些开发工具来完成这个工作,下文再讲。...-m [message] # 提交工作自上次commit之后变化,直接到仓库区 $ git commit -a # 提交显示所有diff信息 $ git commit...如果合并没有处理,也可以在Version Controller处理 ?...2.1、基本使用 2.1.1、基本界面 VS Code配置了中文包。 点击左侧Git标识,可以看到很多操作。 ? 2.1.2、文件状态 对文件进行修改后,有三种状态 ?

    83230
    领券