如何在 Chrome 浏览器的Dev Tools - Console 中设置cookie

Published on Dec 06, 2022

公司项目一般都有区分开发环境,测试环境,预发环境和生产环境。 通常预发环境连接的也是生产的数据库。 也就是说预发环境和生产环境的用户 token 是相同的。 如果你正在登录着生产环境,突然想登录预发环境,这个时候其实完全可以将生产环境的 token 复制到预发环境, 这样可以免去重新登录的麻烦(需要短信验证码)。

我们的前端项目,用户 token 是存储在 cookie 中的。

方案有两种,最简单的就是在开发者工具中点点点,装逼一点就是在开发者工具的 console 中用命令设置。

方案一没太多好说的,就是在当前登录的环境(生产环境)打开 开发者工具 > 应用 > 存储 > Cookie 中找到 token 的值,复制一下。 然后到需要登录的环境(预发环境)同样打开 开发者工具 > 应用 > 存储 > Cookie 中新增一个名为 token 的 cookie,把值粘贴进去即可。

chrome-dev-tools-cookie.png

方案二是查看 cookie 和设置 cookie 都在 console 中完成。

  • 查看 cookie

    document.cookie
    
    console-get-cookie.png
  • 设置 cookie

    document.cookie='_ga=balabalabala; token=1234567890'
    

设置好之后再用 document.cookie 查看,“哎呀卧草,怎么没 token 还是没有”…

一番冲浪之后发现在 chrome console 中通过 document.cookie 来设置 cookie 的话,只能一个一个的设置。 根据表象,其实是只有 ; 分号前的第一个键值会生效。所以只能一个个的来设置。

document.cookie='_ga=balabalabala'
document.cookie='token=123456789'
console-set-cookie.png

如果不想一个一个的设置,也有小伙伴提供了一个简单的方法封装。

function clearCookies(){
  var cookies = document.cookie.split(';');
  for(i in cookies){
    var vals = cookies[i].split('=');
    var name = vals.shift(0, 1).trim();
    document.cookie = name+'=';
  }
}
function parseCookies(cookie){
  clearCookies();
  var cookies = cookie.split(';');
  for(i in cookies){
    var vals = cookies[i].split('=');
    var name = vals.shift(0, 1).trim();
    document.cookie = name+'='+vals.join('=');
  }
}

之后就可以调用 parseCookies('_ga=balabalabala; token=1234567890') 来实现一次设置多个 cookie

console-set-cookie-2.png

参考