MSDN España

Noticias, avisos, reflexiones... del equipo que hay detrás de MSDN en España... también tendremos alguna que otra firma invitada :)

Comprueba la compatibilidad de tu web con IE10 Compat Inspector

Comprueba la compatibilidad de tu web con IE10 Compat Inspector

Rate This
  • Comments 4

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="http://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='http://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.

image_1

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:

image_2

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:

image_3

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:

image_4

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.

Leave a Comment
  • Please add 7 and 4 and type the answer here:
  • Post
  • Espero no lo tomen a mal y publiquen este mensaje.

    ¿Tanto les cuesta crear una herramienta como firebug e incorporarla en IE?, los desarrolladores sufrimos por su culpa, los detestamos porque no se ponen las pilas muchachos!! otra cosa, el modo compatibilidad es una porquería también!! sus herramientas son un desastre.

  • Hola Cristian,

    Internet Explorer incorpora herramientas de desarrollo integradas en el navegador desde que se lanzó IE8 allá por el año 2008.

    Para abrirlas tan solo tienes que seleccionar "Herramientas de Desarrollador" en el menú o pulsar F12.

    Estas herramientas te permiten consultar y modificar ad-hoc el DOM y las hojas de estilo, esto incluye documentos SVG de la página. A nivel de javascript dispones de un depurador de código, de un profiler para medir el rendimiento de tu código, de una consola para ver errores habituales de sintaxis y excepciones, que además te permite  poder ejecutar el código javascript que escribas en la consola. Desde las propias herramientas también puedes formatear los ficheros javascript que hayan sido "minified" para que su lectura y depuración sea más fácil para los desarrolladores.

    También incorporan un monitor de red para evaluar tiempos de carga y detectar errores HTTP y otras muchas funcionalidades como la personalización del UserAgent o la modificación del Browser Mode y el Document Mode.

    En la próxima versión de IE, IE10, las herramientas de desarrollador siguen mejorándose e incorporan nuevas funcionalidades como la posiblidad de depurar Web Workers.

    Tienes varios tutoriales en MSDN que te muestran como hacer uso de éstas, y más funcionalidades, en MSDN que te aconseje que veas. Te dejo la URL:

    msdn.microsoft.com/.../dd565622.aspx

    También puedes ver qué incorpora IE10 en la beta en este enlace ie.microsoft.com/testdrive

    Por otra parte, recuerda que tienes herramientas para desarrolladores más avanzadas como Microsoft Visual Studio que te ofrecen mayor funcionalidad a la hora de programar y depurar aplicaciones web.

    Un saludo.

  • no se ofendan pero sus ridiculas herramientas no ayudan a reparar el internet y ademas si tengo una conexion a internet , dejen de descansar ayudenme a descargar un juego , o si no ya veran que soy rudo...todo paso por su culpa¡¡¡

  • Parece que Microsoft en lugar de querer ayudar a los usuarios, quiere que nos compliquemos la existencia. Hacer una aplicacion Web compatible con IE10 es mas que complicado, peor aun sabes que esta mal. Una misma aplicacion en dos equipos con las mismas caracteristicas funciona diferente, en un equipo se ejecuta bien y en otro no, en uno se ejecuta sin problemas sin habilitar la vista de compatibilidad y en el otro se tiene que habilitar el modo de compatibilidad. Ahora, habilitar el modo de compatibilidad con diferentes metodos es un fiasco.

    No nos dejan otras alternativas que migrar a Firefox, aun para aplicaciones ASP !!!!

Page 1 of 1 (4 items)