Chrome开发者控制台开启时浏览器识别代码返回错误结果求助

我之前用这段代码做浏览器识别：

var browser = (function (agent) { 
  switch (true) { 
    case agent.indexOf("edge") > -1: return "Edge"; 
    case agent.indexOf("edg") > -1: return "chromium based edge (dev or canary)"; 
    case agent.indexOf("opr") > -1 && !!window.opr: return "Opera"; 
    case agent.indexOf("chrome") > -1 && !!window.chrome: return "Chrome"; 
    case agent.indexOf("trident") > -1: return "ie"; 
    case agent.indexOf("firefox") > -1: return "Firefox"; 
    case agent.indexOf("safari") > -1: return "Safari"; 
    default: return "Other"; 
  } 
})(window.navigator.userAgent.toLowerCase()); 
console.log('User\'s browser is: ', browser);

正常在Chrome里加载页面完全没问题，但一开开发者控制台，明明当前还是Chrome，代码居然返回"Safari"，当时可把我整懵了！

问题根源 #

其实这是Chrome开发者工具的设备模拟功能搞的鬼——如果你不小心切换到了iPad（或其他iOS设备）的响应式视图，Chrome会自动修改navigator.userAgent字符串，把Safari的标识塞进去，你的代码检查到"safari"关键词就直接返回了，自然就出现了误判。

快速解决步骤 #

1. 打开Chrome开发者控制台（快捷键F12或者Ctrl+Shift+I）
2. 点击顶部工具栏里那个「手机+平板」的图标（或者按Ctrl+Shift+M快速切换设备视图）
3. 在设备选择器里，把当前设备从iPad/iPhone切换回「响应式」或者Chrome桌面设备

这么操作完，navigator.userAgent就会恢复Chrome原本的标识，你的代码就能正确识别出当前浏览器是Chrome啦！

内容的提问来源于stack exchange，提问作者andriy