VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser“!

简介: VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser“!

一、项目场景:

在上篇文章Django框架中Ajax GET与POST请求的实战应用中,VSCode调试前端页面时,使用open in browseropen with live server会产生不同的结果。


二、问题描述

两种不同打开前端页面的方式:

1. open in browser:

open in browser:

登录成功会自动跳转新闻页面(正常情况下会保持原有session,并显示数据库中存储的新闻数据):

sessionid改变,且没有获取到应得的新闻数据

2. open with live server

open with live server:

登录成功,跳转新闻页面(且sessionid没有发生改变):


三、原因分析:

先了解一下open in browser和open with live server的区别

  1. 访问地址与方式:
  • open in browser:此功能允许用户直接在默认浏览器中打开当前编辑的HTML文件。URL显示的是电脑存储的默认路径,即项目保存的电脑地址。由于是直接打开文件,所以可能会遇到图片加载不出来的问题,特别是在文件路径相对复杂或图片资源未正确引用时。此外,当在写代码的同时,保存代码后,需要手动刷新浏览器页面才能看到最新的效果
  • open with live server:此功能通过Live Server插件在本地创建一个web服务器,并使用该服务器打开HTML文件。URL通常是以127.0.0.1(即localhost)开头,并附加一个端口号(如5500)。由于是通过web服务器打开,它可以解决图片不显示的问题,并且支持动态更新。在写代码时,只需要保存文件,浏览器端的页面就会自动刷新并显示最新的效果。
  1. 开发效率:
  • open in browser:虽然可以直接打开文件,但由于需要手动刷新页面来查看最新的效果,这在一定程度上降低了开发效率。
  • open with live server:通过实时预览和自动刷新的功能,大大提高了开发效率。开发者可以实时查看代码修改后的效果,而无需手动操作。
  1. 调试功能:
  • open in browser:虽然可以在浏览器中查看页面效果,但通常不支持在浏览器中进行调试。
  • open with live server:支持在浏览器中进行调试,能够快速定位并修复页面中的问题。此外,它还支持在浏览器中输出JavaScript的控制台信息,方便进行调试和错误查找。
  1. 配置与自定义:
  • open in browser:支持配置默认浏览器、浏览器路径、端口号和URL参数等。
  • open with live server:除了上述配置外,还可以进行更高级的自定义设置,如自定义服务器选项、设置文件监听规则等。

两者的优缺点

open in browser

优点:

  • 直接性:可以直接在默认浏览器中打开当前编辑的HTML文件,无需额外的插件或设置。
  • 简单性:操作简单,对于初学者而言,无需额外的学习成本。

缺点:

  • 图片加载问题:由于URL显示的是电脑存储的默认路径,可能会遇到图片加载不出来的问题,特别是在文件路径相对复杂或图片资源未正确引用时。
  • 非实时预览:在写代码的同时,保存代码后,需要手动刷新浏览器页面才能看到最新的效果,这在开发时较为麻烦,降低了开发效率。


open with live server

优点:

  • 实时预览:当在编辑器中保存对HTML、CSS或JavaScript文件的更改时,Live Server会自动刷新浏览器,开发者可以立即看到更改的效果,而无需手动刷新,这大大提高了开发效率。
  • 动态页面:通过web服务器打开,解决了图片不显示的问题,访问的是动态直播页面,更加贴近真实的网页浏览体验。
  • 轻量级与快速Live Server是一个轻量级的插件,安装和启动都非常迅速,不会占用太多的系统资源。
  • 一键启动:只需在VS Code中点击几下,就可以启动Live Server,并开始实时预览网页。
  • 支持跨域请求:在开发过程中,如果需要与其他API进行交互,Live Server支持跨域请求,这对于前端开发人员来说是一个非常重要的功能。
  • 自定义性强:可以通过命令行参数来自定义Live Server的行为,例如指定服务器端口、主机名等。

缺点:

  • 功能相对基础:虽然Live Server提供了实时重载和本地服务器的基本功能,但对于更复杂的需求(如多设备同步、高级调试等),它可能不如其他工具强大。
  • 可能需要额外配置:在某些情况下,可能需要配置防火墙或网络设置,以确保Live Server可以正常工作。
  • 安全性:由于Live Server通常用于本地开发,它可能不如生产环境下的服务器软件安全。因此,不建议在生产环境中使用Live Server。

四、解决方案:

在上述分析的基础上,分析在跨域方面open in browser open with live server 的区别,这些区别主要体现在对Cookie、Session的设置和获取上。如下所示:

open in browser

  • 直接访问文件open in browser 是直接打开HTML文件,而不是通过HTTP服务器。因此,它不会涉及跨域请求的问题。然而,这也意味着它无法处理跨域相关的CookieSession

  • Cookie和Session的限制由于直接访问文件,浏览器可能会将请求视为来自“null”源(即文件协议,而不是HTTP或HTTPS),这可能导致CORS(跨来源资源共享)策略阻止访问其他源(如API服务器)的CookieSession
  • 开发体验:在开发过程中,如果需要在本地测试跨域CookieSession的功能,open in browser 可能不是最佳选择。

open with live server

  • 通过HTTP服务器访问open with live server 使用Live Server插件在本地创建一个web服务器,并通过该服务器打开HTML文件。这意味着所有的请求都是通过HTTP协议发送的,可以更容易地处理跨域请求。
  • Cookie和Session的支持:由于通过HTTP服务器访问,open with live server 可以支持跨域Cookie和Session这允许你在本地测试跨域身份验证和会话管理功能。
  • 配置灵活性Live Server插件允许你配置服务器的各种设置,包括端口号、主机名等。这使得你可以更容易地控制跨域请求的行为。
  • 开发体验:对于需要测试跨域功能的开发者来说,open with live server 提供了一个更加灵活和方便的解决方案。你可以轻松地设置和测试跨域Cookie和Session,而无需担心CORS策略的限制。

总结

  • open in browser 适用于简单的本地文件访问,但不支持跨域Cookie和Session的处理。
  • open with live server 通过本地HTTP服务器访问文件,支持跨域Cookie和Session的处理,并提供更多的配置灵活性。对于需要测试跨域功能的开发者来说,它是一个更好的选择。

所以,在开发过程中,如果需要处理跨域相关的Cookie和Session,建议使用open with live server。然而,如果你只是需要简单地查看本地HTML文件,open in browser 可能就足够了。

目录
打赏
0
1
1
0
38
分享
相关文章
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
197 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
436 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
用C语言开发游戏的实践过程,包括选择游戏类型、设计游戏框架、实现图形界面、游戏逻辑、调整游戏难度、添加音效音乐、性能优化、测试调试等内容
本文探讨了用C语言开发游戏的实践过程,包括选择游戏类型、设计游戏框架、实现图形界面、游戏逻辑、调整游戏难度、添加音效音乐、性能优化、测试调试等内容,旨在为开发者提供全面的指导和灵感。
279 2
「测试线排查的一些经验-中篇」&& 调试日志实战
「测试线排查的一些经验-中篇」&& 调试日志实战
102 1
「测试线排查的一些经验-中篇」&& 调试日志实战
什么是软件测试? 软件测试都有什么岗位 ?软件测试和调试的区别? 软件测试和开发的区别? 一位优秀的测试人员应该具备哪些素质? 软件测试等相关概念入门篇
文章全面介绍了软件测试的基本概念、目的、岗位分类、与开发和调试的区别,并阐述了成为优秀测试人员应具备的素质和技能。
721 1
什么是软件测试? 软件测试都有什么岗位 ?软件测试和调试的区别? 软件测试和开发的区别? 一位优秀的测试人员应该具备哪些素质? 软件测试等相关概念入门篇
掌握Unity调试与测试的终极指南:从内置调试工具到自动化测试框架,全方位保障游戏品质不踩坑,打造流畅游戏体验的必备技能大揭秘!
【9月更文挑战第1天】在开发游戏时,Unity 引擎让创意变为现实。但软件开发中难免遇到 Bug,若不解决,将严重影响用户体验。调试与测试成为确保游戏质量的最后一道防线。本文介绍如何利用 Unity 的调试工具高效排查问题,并通过 Profiler 分析性能瓶颈。此外,Unity Test Framework 支持自动化测试,提高开发效率。结合单元测试与集成测试,确保游戏逻辑正确无误。对于在线游戏,还需进行压力测试以验证服务器稳定性。总之,调试与测试贯穿游戏开发全流程,确保最终作品既好玩又稳定。
657 4
揭秘Java高效编程:测试与调试实战策略,让你代码质量飞跃,职场竞争力飙升!
【8月更文挑战第30天】在软件开发中,测试与调试对确保代码质量至关重要。本文通过对比单元测试、集成测试、调试技巧及静态代码分析,探讨了多种实用的Java测试与调试策略。JUnit和Mockito分别用于单元测试与集成测试,有助于提前发现错误并提高代码可维护性;Eclipse和IntelliJ IDEA内置调试器则能快速定位问题;Checkstyle和PMD等工具则通过静态代码分析发现潜在问题。综合运用这些策略,可显著提升代码质量,为项目成功打下坚实基础。
116 2
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
1254 1
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
甚至用不了五分钟就能学会vscode插件开发
本文介绍了VSCode插件的开发流程,从创建项目到最终发布。首先通过安装`yo`和`generator-code`脚手架工具初始化项目,选择JavaScript语言配置基础信息。接着,在`extension.js`中实现业务逻辑,例如将中文“变量”替换为“var”。通过F5进入调试模式验证功能。完成后使用`vsce`工具进行打包,解决可能遇到的版本不兼容或README文档问题。最后生成`.vsix`文件,可通过VSCode的“从VSIX安装”加载插件,实现开发闭环。进一步可将插件发布至官方市场供更多开发者使用。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问