Edge浏览器没有让我失望! 今天终于可以在win10中模拟IE内核进行前端测试了!

简介: 在win10中模拟IE内核进行前端测试

🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步!😄
🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注

2.png

前言 😝

ietest现在是不是不好用了? Edge浏览器仿真是不是不见了?

如图

3.png

如果我们在前端开发javascript遇见一些老旧的语法标准,想要测试一下都难,想想都抓狂!😤😤

不过不用担心,经过这几天的资料查阅,我还是找到了一个解决办法来模拟旧版IE内核,

其实根据微软官方给出的资料IE模式Windows 10版本上都是可用的!

只需要几步我们就可以调出Edge浏览器IE内核测试功能!

设置Edge 🏅

这里我以win10为例, 打开你当前最新安装的Edge浏览器, 并且切换到设置选项

如图

4.png

5.png

来到设置选项之后,我们选择默认浏览器

然后在右侧的运行在Internet Explorer模式下重新加载网站(IE模式)这一栏,我们选择允许

如图

6.png

接下来我们选择外观选项, 然后在右侧往下拉

找到Internet Explorer模式(IE模式)按钮这个选项,把旁边开关打开!

如图

7.png

这样设置以后,你就会发现右上角会多一个ie浏览器小图标

如图

8.png

Edge开启IE内核模式 🌍

我们再来打开一个web页面,并且开启IE内核模式看看效果!

比如我们用Edge打开一个页面之后,再点击右上角的ie浏览器小图标即可开启IE内核模式

如图

9.png

在弹出的对话框中选择完成即可!

Edge在IE模式中使用调试工具 🔨

当你在Edge中使用了IE模式之后,你可能会发现开发工具不能用了!

即便是你按下快捷键F12就会提示如下信息!

如图

10.png

其实你也不要慌张,它这里不是提示了有一个了解详细信息的链接吗! 我们点击进去!

就进入到微软官方所给的解决方案!

地址: https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/ie-mode

那么这时候我们要打开调试工具怎么办呢

这个时候我们可以打开运行对话框,你也可以按快捷键 win徽标键 + R

然后输入以下代码:

%systemroot%\system32\f12\IEChooser.exe

如图

11.png

单击确定, 我们就可以打开IE模式下的调试工具

然后根据需求在IEChooser中选择IE模式选项卡对应的文档即可进行调试!

12.png

最后我们就可以在这里进行调试,和选择IE模式的种类了!

如图

13.gif

代码测试 🚀

有了IE内核测试功能,我们在做前端测试的时候,就可以很方便的去测试一些比较老旧的标准或代码,以便于和现在最新的标准做比较!

使用javascript判断当前用户使用的是什么浏览器

当我们开发网页的时候,经常会遇到浏览器兼容性问题

对于不同的浏览器环境,我们可以通过javascript代码进行判断和处理。

js中,我们可以通过navigator.userAgentapi获得浏览器的一些信息,也就是浏览器标识符。

该字符串包含了浏览器名称、版本号、操作系统等信息,然后再通过正则表达式过滤字符串判断不同浏览器,大概思路就是这样子!

比如我们可以通过navigator.userAgent拿到ie5、ie7、ie8、ie9、ie10、ie11的浏览器信息!

console.log(navigator.userAgent);

然后我们就可以利用Edge中的IE模式来模拟这几种ie浏览器的信息!

打印所获取到的信息如下:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)  //ie5


Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)  //ie7


Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)  //ie8


Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)  //ie9


Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729) //ie10


Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko   //ie11

正则表达式判断当前浏览器是否为ie浏览器内核, 然后在这个基础之上再判断当前是哪个ie浏览器内核

var userAgent = navigator.userAgent;
if (/MSIE|Trident/.test(userAgent)) {
   
    alert('当前浏览器为ie浏览器');
}

打印测试结果如下图

如图
14.gif

测试结果为在其他浏览器是不会弹出这个警告框的,但是在ie浏览器内核下就会弹出警告框!

然后我们再来区分以下不同的ie版本

通过仔细观察规律你会发现ie5和ie7的浏览器信息都一样ie8、ie9、ie10这几个浏览器内核中的MSIE后面所跟的版本数字是不同的,至于ie11你可以用排除法,处理了其他ie浏览器,剩下的就是这个ie11

简单规划一下代码如下:

var userAgent = navigator.userAgent;
if (/MSIE|Trident/.test(userAgent)) {
   
    alert('当前浏览器为ie浏览器');
    if(/MSIE 7.0/.test(userAgent)){
   
        alert('并且当前使用的浏览器为ie5或ie7');
    }else if(/MSIE 8.0/.test(userAgent)){
   
        alert('并且当前使用的浏览器为ie8');
    }else if(/MSIE 9.0/.test(userAgent)){
   
        alert('并且当前使用的浏览器为ie9');
    }else if(/MSIE 10.0/.test(userAgent)) {
   
        alert('并且当前使用的浏览器为ie10');
    }else{
   
        alert('并且当前使用的浏览器为ie11');
    }
}

如图

15.gif

navigator.userAgent获取到的firefox、opera、Edge、Chrome这几个浏览器信息如下:

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0  //firefox


Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 OPR/101.0.0.0  //opera


Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.76  //Edge


Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36  //Chrome

仔细观察,里面基本上都有自己独特的地方,那么我们也可以拿到代码中进行过滤判断!

代码

var userAgent = navigator.userAgent;
if (/MSIE|Trident/.test(userAgent)) {
   
    alert('当前浏览器为ie浏览器');
    if(/MSIE 7.0/.test(userAgent)){
   
        alert('并且当前使用的浏览器为ie5或ie7');
    }else if(/MSIE 8.0/.test(userAgent)){
   
        alert('并且当前使用的浏览器为ie8');
    }else if(/MSIE 9.0/.test(userAgent)){
   
        alert('并且当前使用的浏览器为ie9');
    }else if(/MSIE 10.0/.test(userAgent)) {
   
        alert('并且当前使用的浏览器为ie10');
    }else{
   
        alert('并且当前使用的浏览器为ie11');
    }
}else if(/Firefox/.test(userAgent)){
   
    alert('你当前使用的浏览器为:Firefox火狐浏览器');
}else if(/OPR/.test(userAgent)){
   
    alert('你当前使用的浏览器为:opera欧朋浏览器');
}else if(/Edg/.test(userAgent)){
   
    alert('你当前使用的浏览器为:Edge微软浏览器');
}else{
   
    alert('你当前使用的浏览器为:Chrome谷歌浏览器');
}

使用javascript获取当前元素css样式

我们可以使用Edge模拟IE内核测试一下获取css属性的情况!

使用一个叫currentStyle属性

元素节点对象.currentStyle.css样式名称;

举个栗子

<style>
    #div1{
    
        border: 3px solid red;
        line-height:100px;
        text-align:center;
        font-size: 13px;
        color: red;
        background-color: greenyellow;
    }
</style>

<script>
    window.onload=function () {
    
        var but=document.getElementById('but');
        var div1=document.getElementById('div1');
        but.onclick=function () {
    
            console.log('当前元素的宽度是:'+div1.currentStyle.width);
            console.log('当前元素的宽度是:'+div1.currentStyle.height);
            console.log('当前元素的背景色:'+div1.currentStyle.backgroundColor);
            console.log('当前元素的字号:'+div1.currentStyle.fontSize);
            console.log('当前元素的文字颜色:'+div1.currentStyle.color);
        }
    }
</script>

<input type="button" value="读取css样式" id="but">
<br>
<div id="div1">北京市</div>

这里的currentStyle属性 仅仅只是ie浏览器才支持的属性 ,所以我们才要使用到Edge浏览器来进行模拟IE浏览器的内核进行测试!

效果如图

16.gif

chorme谷歌、Opera欧朋、FireFox火狐、Microsoft Edge这些浏览器是不支持的,在这些浏览器中使用currentStyle属性会报Uncaught TypeError(未捕获类型错误)的错误!

当然我们直接使用`getComputedStyle()这个方法就可以解决这个问题,这里我就不过多赘述了!

相关文章
|
8天前
|
开发者
查看edge浏览器插件的安装位置并将插件安装到别的浏览器
查看edge浏览器插件的安装位置并将插件安装到别的浏览器
58 1
|
8天前
|
文字识别 安全 JavaScript
6款超实用的Edge浏览器插件,让你的浏览器瞬间开挂!
Microsoft Edge是由微软开发的一款网页浏览器,致力于提供一个现代化、高效率、安全可靠的网络浏览器,以满足用户对于网络浏览的各种需求。
|
8天前
|
安全 Linux 测试技术
提升龙蜥内核测试能力!探究持续性模糊测试优化实践
清华大学软件学院对Anolis OS使用靶向模糊测试方法将测试工作引向修改的代码,进而提高对业务代码的测试能力。
|
8天前
|
Web App开发 小程序 前端开发
【产品上新】小程序新内核来了!提升安卓浏览器性能,支持WebRTC
【产品上新】小程序新内核来了!提升安卓浏览器性能,支持WebRTC
48 0
Edge浏览器控制台(F12)中网络不显示接口信息
Edge浏览器控制台(F12)中网络不显示接口信息
|
8天前
edge浏览器内存不足
edge浏览器内存不足
18 0
|
8天前
|
前端开发 JavaScript UED
Edge浏览器兼容性问题如何修复,这篇文章告诉你
解决Edge浏览器兼容性问题的方法包括:1) 调整兼容性视图设置;2) 使用内置的IE模式浏览;3) 确保浏览器更新至最新版本;4) 禁用硬件加速;5) 修改注册表设置。通过这些方法,可确保程序在Edge浏览器中正常运行,提升用户体验。
39 0
|
8天前
|
缓存 搜索推荐
【电脑知识】Edge浏览器的使用技巧(特别详细)
【电脑知识】Edge浏览器的使用技巧(特别详细)
67 0
|
8天前
|
Python
使用selenium的edge浏览器登录某为
使用selenium的edge浏览器登录某为
37 0
|
8天前
解决selenium打开edge浏览器闪退问题
解决selenium打开edge浏览器闪退问题
102 1

热门文章

最新文章