前端调试、兼容、适配指南与工具分享

前端调试

1、对于新型创业公司来说,我们一般需要考虑以下的各种典型的浏览器:

PC端: chrome、firefox、IE、360、搜狗
移动端: IE、360、UC、safari、安卓、QQ浏览器

若是基于微信的网页开发,那么需要在微信上进行调试:

  • 个人:直接用手机打开网页,alert
  • 推荐:微信开发者工具。ps:需要有公众号,并且开放开发者权限。跟一般浏览器的调试功能相似。

2、PC端如何调试?

直接打开:

  • 对于无数据交互功能的静态页面 —— 直接用浏览器打开文件
  • 涉及到后台数据交互:搭建http-server,在不同的浏览器打开网址

    • 如何搭建一个本地的http-server

      • window:搭建wamp环境
      • linux:搭建lamp环境
      • 轻量化: xampp(个人正在使用)
    • 如何访问?

      • 学习各个环境文件放在哪里
      • http://127.0.0.1:port/路径localhost:port/路径访问

虚拟机
If you like, everything is ok! ?

补充——打开浏览器的开发者工具

(1)在IE中调试
打开IE--使用Internet explorer打开--开发者人员工具--仿真

(2)在chrome中调试:
右键--检查

3、移动端如何调试?

最简单的,打开浏览器的开发者工具,选择左上角的手机图标:

图片描述

4、测试工具分享

  • 1、IETester
    顾名思义,模拟IE不同版本浏览器的一个测试工具。不过现在大多数公司都已经放弃了IE8以下的用户了。所以看自己时间与精力吧。
  • 2、云测试 testin.cn
  • 3、安卓浏览器 Genynotion 有时需
  • 4、省时的浏览器测试同步工具:browsersync(用npm安装,支持远程访问,好酷!)

前端兼容性

1、polyfill与shim:填平浏览器兼容的坑

  • shim的意思是在一个老(旧)环境中模拟出一个新API,有时也叫做shiv,例如著名的html5shiv库。
  • polyfill的意思和shim差不多,2010年10月份Remy Sharp引进了这个概念,一个polyfill是一段代码或插件,用来提供浏览器不能提供的功能。程序库先检查浏览器是否支持某个API,如果不支持则加载对应的polyfill。
  • polyfill这个词最早来自居室装修领域,是一个英国产品,在美国称为Spackling Paste(刮墙用的,Spackle是美国抹墙粉的一个品牌。在中国称为腻子或填泥,腻子英文是putty,而填泥英文是filler)。可以这样理解:把旧的浏览器想象成一面有了裂痕的墙,这些polyfill会帮助我们把这面墙的裂痕抹平,桓我们一个光滑的墙壁。
  • shim的概念要比polyfill更大一些,可以将polyfill理解为专门兼容浏览器API的shim。

我们可以这么理解polyfill:
如果浏览器X支持标准规定的功能,那么polyfill可以让浏览器Y的行为与浏览器X一样。

2、对于IE浏览器,用最新的渲染模式渲染

标签中加入下面这段代码:

   

3、html浏览器兼容

同样,在

标签中加入下面这段代码:

 
其中各个英文对应的符号:

lt < 小于
gt > 大于
lte <= 小于或等于
gte >= 大于或等于

4、统一样式

不同的浏览器都有内置的默认样式,所以我们通常需要统一各个浏览器的样式,所以在页面中引入以下文件吧。
具体文件直接搜索即可?
css resets vs Normalize.css

5、通用兼容性方法

  • cssHacks 通过browserhacks.com可搜索是否可用
  • polyfill/shiv
  • 使用Modernizr 防御性主动性编程 为我们主动加类,自己写样式 .svg{} .no-svg{}

6、caniuse查兼容性

我们可以看看,哪些我们可以使用,哪些属性语法不能用,戳下面?
can I Use 官网

前端适配

移动端适配

如果你是做移动端开发的,在header中加入以下这一段代码是至关重要的。

另外,还可以插入以下代码:


参考资料

Javascript术语

每天坚持学习与输出,欢迎来跟我交流!

你可能感兴趣的:(前端,调试,适配器,兼容性)