Comprueba la compatibilidad de tu web con IE10 Compat Inspector

El desarrollo de Internet Explorer no se detiene y cada nueva versión incorpora mejoras y soporte para nuevas tecnologías. Con el lanzamiento de la Consumer Preview de Windows 8 que incluye la versión 10 de Internet Explorer, cada vez más desarrolladores desean asegurarse de que sus sitios web están a punto para el lanzamiento final de la nueva versión de Internet Explorer. Con este objetivo en mente hoy hablaremos de Compat Inspector.

¿Qué es Compat Inspector?

Compat Inspector es una herramienta JavaScript que realiza una batería de test contra el sitio web y nos presenta un informe sobre la compatibilidad del sitio con Internet Explorer 10. Esto nos ayuda a migrar sitios a IE 10 identificando los problemas más comunes de forma automática. Además, para algunos de estos problemas la herramienta incluye verificadores, que emulan el comportamiento de anteriores versiones para asegurarse que son la causa del problema.

Primeros pasos

Para usar Compat Inspector sólo necesitas incluir la siguiente línea a tu página web:

 <script src="https://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js">
</script>

Compat Inspector no podrá hacer su trabajo adecuadamente si otro código JavaScript se ejecuta antes que él, así que asegúrate de poner su código antes que cualquier otro JavaScript que estés usando. Un buen lugar es el comienzo de la sección header.

La inclusión manual del JavaScript es una técnica perfectamente válida, pero resulta impracticable si se quiere verificar la compatibilidad de sitios web extensos o que se encuentran en producción. Una buena solución es hacer uso de otra herramienta gratuita, Fiddler, un Proxy HTTP de depuración, para inyectar la inclusión del JavaScript en cada página que visitemos.

Ayudándonos con Fiddler

Una vez descargado e instalado, es necesario decirle que inyecte la línea HTML que nos interesa en todas las páginas web que visitemos. Para ello iremos a Rules -> Customize Rules… y dentro de OnBeforeResponse añadiremos la siguiente línea:

 InjectInspectorScript(oSession);

Justo antes del fin de la clase Handlers añadiremos el siguiente código:

 public static RulesOption("Use Compat Inspector")
var m_UseCompatInspector: boolean = false;
static function InjectInspectorScript(oSession: Session)
{
  if(!m_UseCompatInspector) return;
   
    // Ensure we only inject into HTML
  if (oSession.url.EndsWith(".js")) return;
   if (oSession.url.EndsWith(".css")) return;
  if (!oSession.oResponse.MIMEType.Contains("text/html")) return;
 
    // Retrieve the response body
   var sBody = oSession.GetResponseBodyAsString();
 // One final check to ensure the content looks like HTML
    if (!/^\uFEFF?\s*</.exec(sBody)) return;
 
    // Prepare to inject
    var pos = 0; // Initial position is start of document
   
    // Locate important elements in the page
    var doctype = sBody.IndexOf("<!doctype", StringComparison.OrdinalIgnoreCase);
    var meta = sBody.IndexOf("X-UA-Compatible", StringComparison.OrdinalIgnoreCase);
    var script = sBody.IndexOf("<script", StringComparison.OrdinalIgnoreCase);
   
    // Place after doctype (if present)
 if (doctype != -1) doctype = sBody.IndexOf(">", doctype + 1);
    if (doctype != -1 && doctype != sBody.Length - 1) pos = doctype + 1;
    
    // Place after first X-UA-Compatible meta tag (if present)
  if (meta != -1) meta = sBody.IndexOf(">", meta + 1);
 if (meta != -1 && meta != sBody.Length - 1) pos = meta + 1;
 
    // Place before any script tags that occur before the current position
  if (script != -1 && script < pos) pos = script;
  
    // Perform the injection at the detected location
   oSession.utilSetResponseBody(
       sBody.Insert(pos, 
"<script src='https://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js'>" +
"</script>")
   );
}

¿Cómo se usa?

Cuando Compat Inspector analiza una web, nos mostrará en la esquina superior derecha un resumen del número de, por orden, errores encontrados, posibles problemas y verificaciones.

Antes de proceder con el análisis debemos fijar el Browser Mode a IE10 y el Document Mode a Standards dentro de las Developer Tools que podemos sacar con F12:

Tened en cuenta que algunos errores se presentarán en tiempo de ejecución, por lo que un resultado inicial de cero problemas, no quiere decir que no pueda existir alguno que Compat Inspector sepa detectar. Por ejemplo el siguiente código reportará inicialmente cero problemas:

 <html>
  <head>
    </head>
   <body>
        <script>
          function writeBrowserName() {
   document.getElementById("browserLabel").innerHTML = window.navigator.product;
           }  
     </script>   
      <button onclick="writeBrowserName();">product</button>
      <div id="browserLabel"> <div> 

  </body>
</html>

Cuando hagamos clic sobre el botón, el contador de posibles problemas subirá a uno. Si hacemos clic sobre el número obtendremos el reporte:

En este caso Compat Inspector nos informa de que el sitio web está haciendo uso de navigator.product para saber qué navegador está usando el visitante. En nuestro ejemplo sólo se muestra el valor de navigator.product, pero sería posible servir un CSS o una web completamente distinta en función del valor retornado. Esta técnica está totalmente desaconsejada. En lugar de detectar el navegador del usuario y servir una web en cada caso, debería preguntársele al navegador si soporta la función que deseamos usar y usarla solo en caso afirmativo.

En nuestro ejemplo el uso de navigator.product no representa un problema, puesto que no lo usamos para servir distintas cosas en función de su respuesta, pero podemos comprobarlo marcando la casilla Verify y refrescando la página. Compat Inspector cambiará la respuesta de IE10 por “Mozilla” y podremos observar los cambios. Si el servidor nos retornase ficheros distintos, deberíamos corregir el error:

Librerías

Compat Inspector también se encarga de detectar librerías desactualizadas. Si nuestro sitio está usando librerías JavaScript antiguas, podemos estar dejando de lado funcionalidad que ya se encuentra disponible o usar workarounds que no son necesarios. Si Compat Inspector detecta una librería desactualizada nos avisará y nos dará la posibilidad de usar la última versión marcando Verify. Sin embargo es posible que la substitución no sea posible si hemos concatenado varios JavaScript.

Después de usarlo

Elimínalo. Compat Inspector no está pensado para entornos de producción y no ha sido probado para ello. Este es uno de los motivos por los que recomendamos que hagas uso de Fiddler, ya que entonces no hay ningún paso de desinstalación y Compat Inspector nunca llegará a los visitantes.

Si tienes cualquier duda o sugerencia ¡no dudes en dejarnos un comentario!

El equipo de MSDN.