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

在这里插入图片描述

文章目录

  • 一、项目场景:
  • 二、问题描述
    • 1. open in browser:
    • 2. open with live server
  • 三、原因分析:
    • 先了解一下open in browser和open with live server的区别
    • 两者的优缺点
      • open in browser
      • open with live server
  • 四、解决方案:
    • 总结

一、项目场景:

在上篇文章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服务器打开,它可以解决图片不显示的问题,并且支持动态更新。在写代码时,只需要保存文件,浏览器端的页面就会自动刷新并显示最新的效果。
  2. 开发效率:
    • open in browser:虽然可以直接打开文件,但由于需要手动刷新页面来查看最新的效果,这在一定程度上降低了开发效率。
    • open with live server:通过实时预览和自动刷新的功能,大大提高了开发效率。开发者可以实时查看代码修改后的效果,而无需手动操作。
  3. 调试功能:
    • open in browser:虽然可以在浏览器中查看页面效果,但通常不支持在浏览器中进行调试。
    • open with live server:支持在浏览器中进行调试,能够快速定位并修复页面中的问题。此外,它还支持在浏览器中输出JavaScript的控制台信息,方便进行调试和错误查找。
  4. 配置与自定义:
    • 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 可能就足够了。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/344889.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java开发-面试题-0005-==和String的equals()和String的intern()方法的区别

Java开发-面试题-0005-和String的equals()和String的intern()方法的区别 更多内容欢迎关注我(持续更新中,欢迎Star✨) Github:CodeZeng1998/Java-Developer-Work-Note 技术公众号:CodeZeng1998(纯纯技术…

前端多人项目开发中,如何保证CSS样式不冲突?

在前端项目开发中,例如突然来了一个大项目,很可能就需要多人一起开发,领导说了,要快,要快,要快,你们给我快。然后下面大伙就一拥而上,干着干着发现,一更新代码&#xff0…

转型AI产品经理(5):“锚定效应”如何应用在Chatbot产品中

锚定效应是认知心理学中一个重要的概念,它描述了人们在进行判断或决策时,往往过于依赖最先接收到的信息或数字(即“锚点”),即使后续信息与初始锚点无关甚至相反,这个初始信息也会显著地影响最终的判断结果…

【下篇】从 YOLOv1 到 YOLOv8 的 YOLO 物体检测模型历史

YOLO 型号之所以闻名遐迩,主要有两个原因:其速度和准确性令人印象深刻,而且能够快速、可靠地检测图像中的物体。上回我解释了YoloX, 今天从Yolov6开始。 YOLOv6:面向工业应用的单级物体检测框架 美团视觉人工智能事业部(Meituan Vision AI Department)于 2022 年 9 月在…

拯救者Legion Y9000X IRX9 2024(83FD)原装出厂Windows11系统镜像下载

lenovo联想2024款拯救者Y9000X IRX9 笔记本电脑【83FD】OEM预装Win11系统安装包,恢复开箱状态,自带恢复重置还原功能 链接:https://pan.baidu.com/s/1i_sVcnXF4qgsuj02rebe-Q?pwdyefp 提取码:yefp 联想原装WIN11系统自带所有…

Junit 单元测试 详解,包你掌握

Java单元测试----Junit详解 1 什么是 Junit JUnit 是一个广泛使用的 Java 单元测试框架。它用于编写和运行可重复的测试,以验证 Java 程序的行为是否符合预期 也许有人会好奇,之前学的 Selenium 和 Junit 有什么关系?答案就是没关系&#…

htb-linux-6-beep

nmap web渗透 目录扫描 漏洞关键词 shell py脚本执行 flag root 目前的权限 nmap root

《精通ChatGPT:从入门到大师的Prompt指南》第4章:避免常见错误

第4章:避免常见错误 在使用ChatGPT进行Prompt编写时,常见的错误可能会大大影响生成内容的质量和准确性。本章将详细讨论这些错误,并提供如何避免它们的建议。 4.1 不明确的指令 在使用ChatGPT时,一个常见的问题是指令不够明确。…

使用proteus仿真51单片机的流水灯实现

proteus介绍: proteus是一个十分便捷的用于电路仿真的软件,可以用于实现电路的设计、仿真、调试等。并且可以在对应的代码编辑区域,使用代码实现电路功能的仿真。 汇编语言介绍: 百度百科介绍如下: 汇编语言是培养…

Spring boot+vue前后端分离

目录 1、前端vue的搭建 2、后端项目的构建 pom文件中引入的jar包 yml文件用来配置连接数据库和端口的设置 application.property进行一些整合 service层 imp层 mapper 实体类 额外写一个类、解决跨域问题 3、测试 1、前端vue的搭建 建立项目的过程略 开启一个建立好…

JDK下载安装Java SDK

Android中国开发者官网 Android官网 (VPN翻墙) 通过brew命令 下载OracleJDK(推荐) 手动下载OracleJDK(不推荐) oracle OracleJDK下载页 查找硬件设备是否已存在JDK环境 oracle官网 备注: JetPack JavaDevelopmentKit Java开发的系统SDK OpenJDK 开源免费SDK …

unity3d:GameFramework+xLua+Protobuf+lua-protobuf,生成.cs,.pb工具流

概述 1.区分lua,cs用的proto 2.proto生成cs,使用protogen.exe,通过csharp.xslt修改生成cs样式 3.proto生成lua加载.pb二进制文件,并生成.pb列表文件,用于初始化加载 4.协议id生成cs,lua中枚举 区分cs&…

spring boot3登录开发-2(3邮件验证码接口实现)

⛰️个人主页: 蒾酒 🔥系列专栏:《spring boot实战》 目录 写在前面 上文衔接 接口设计与实现 1.接口分析 2.实现思路 3.代码实现 1.定义验证码短信HTML模板枚举类 2.定义验证码业务接口 3. 验证码业务接口实现 4.控制层代码 4.测试 写…

【原创】springboot+mysql农业园区管理系统设计与实现

个人主页:程序猿小小杨 个人简介:从事开发多年,Java、Php、Python、前端开发均有涉猎 博客内容:Java项目实战、项目演示、技术分享 文末有作者名片,希望和大家一起共同进步,你只管努力,剩下的交…

【物联网实战项目】STM32C8T6+esp8266/mqtt+dht11+onenet+uniapp

一、实物图 前端uniapp效果图(实现与onenet同步更新数据) 首先要确定接线图和接线顺序: 1、stm32c8t6开发板连接stlinkv2下载线 ST-LINK V2STM323.3V3.3VSWDIOSWIOSWCLKSWCLKGNDGND 2、ch340串口连接底座(注意RXD和TXD的连接方式…

数据结构之计数排序算法【图文详解】

P. S.:以下代码均在VS2019环境下测试,不代表所有编译器均可通过。 P. S.:测试代码均未展示头文件stdio.h的声明,使用时请自行添加。 博主主页:LiUEEEEE                        …

贪心算法-加油站

一、题目描述 二、解题思路 1.运动过程分析 这里需要一个油箱剩余油量的变量resGas,初始化resGas0;还需要一个标记从什么位置当做初始位置的startIdx,初始化startIdx0。 我们从数组下标idx0处开始向后遍历,初始时startIdx0&#…

go语言进阶 init() 函数

go 语言包 在一个项目中通常我们需要引入第三方包,我们来看下 当我们导入一个包的时候 发生了什么: 首先我们先详细介绍下两个函数: init(), main() 是 go 语言中的保留函数。我们可以在源码中 定义 init()函数, 此函数会在包导入…

代码随想录——将有序数组转化为二叉搜索树(Leetcode108)

题目链接 递归 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) {* …

Java Web学习笔记24——Vue项目开发流程

import是引入文件。 export是将对象导出为模块。 new Vue({ router, router: h > h(App) }).$mount(#app) App.vue: vue的组成文件以.vue结尾&#xff0c;每个组件由三个部分组成&#xff1a;<template>、<script>、<style>。 <template><d…