Cómo desarrollar usando Chrome DevTools, todo el mundo lo sabe. ¿Y cómo se ve el desarrollo de Chrome DevTools?
Alexei Kozyatinsky trabajó anteriormente en Google e hizo exactamente eso, y ahora se mudó a Netflix, pero no se ha alejado mucho de sus actividades anteriores.
¿Qué está haciendo exactamente ahora? ¿Qué tan realista es para un desarrollador común que no es de Google copiar algo útil en DevTools? ¿Qué computadoras usan los ingenieros de Chrome?
Actualmente estamos organizando la conferencia HolyJS 2019 Piter, donde Alexey ya ha realizado un nuevo informe, "Chrome DevTools Protocol" (la grabación se puede ver en la
transmisión gratuita ). Y en esta ocasión, fue interrogado en detalle por dos miembros del comité del programa HolyJS:
Dmitry DmitryMakhnev Makhnev y
Alexei zolotyh Zolotykh .
Dmitry Makhnev: Cuéntame un poco sobre ti. ¿Dónde, cómo, dónde, qué estás haciendo ahora?Alexei Kozyatinsky: Regresaré un poco y les diré que Chrome DevTools en Google ha estado trabajando durante más de cuatro años. Básicamente, hice un depurador de JavaScript y todo lo relacionado con JavaScript, Node y todo lo que se puede imaginar alrededor de JavaScript en general. Ahora trabajo para otra compañía llamada Netflix. Y aquí llegué a hacer una cosa muy simple: tienen su propio motor web interno con su propio JavaScript extraño. Y todo necesita sus propias herramientas geniales, que se pueden llamar "Chrome DevTools". Y, en consecuencia, mi objetivo era hacer estas herramientas.
Todavía es relevante, hago algo y soy absolutamente responsable de todo: para el backend de este negocio, para que la interfaz de DevTools funcione normalmente. Y al mismo tiempo, nuestro objetivo es trabajar de tal manera que continúe pasando de contrabando en Chrome DevTools, para actualizar todos los parches posibles. Para que no sea que nos bifurquemos, nos dispersaremos para siempre y perderemos el resultado del trabajo de mis geniales colegas de Google. Así que sigo haciendo lo mismo que antes: Chrome DevTools.
Dmitry: genial.Alexei Zolotykh: Su biografía en HolyJS tiene la siguiente redacción: "Encabezó la mayoría de los intentos de la compañía por mejorar la vida de los desarrolladores, comenzando con pilas asincrónicas y terminando con los nuevos Objetos de consulta de moda". Primero, ¿por qué intentarlo? Y en segundo lugar, ¿puede contarnos más? ¿Es esto probablemente más sobre Google?Alexei: Comencemos con la palabra "intento". Muy buena pregunta Y tengo una respuesta para eso. Esta fue originalmente la palabra "esfuerzos". Como he estado viviendo y trabajando en California durante los últimos años, una traducción me falló. ¿Por qué decidí traducir la palabra "esfuerzo" como "intento"? Quizás esto todavía no sea un "intento". Por supuesto, estos fueron "intentos", porque tratamos de hacer algo, pero estos fueron intentos exitosos, completamos la mayoría de ellos.
Pero al mismo tiempo, Objetos de consulta: era algo pequeño que se podía leer en Twitter o en el Medio, y esto es lo que hemos completado. Y la depuración asíncrona es lo que necesitamos completar en Chrome DevTools. Comenzamos a hacer esto, lo intentamos varias veces, porque esto no es algo trivial. Intenta una solución: escuche a los usuarios, se acercan a usted y le dicen: "No entiendo lo que está sucediendo aquí, ¿puede hacer algo con esto?" Intenta de manera diferente, intenta hacer otra cosa, y así, paso a paso, sucede algo. Pero es importante decir que la mayoría de los intentos tuvieron éxito.
En Google, pasé la mayor parte de mi vida de desarrollo. Vine allí una vez como pasante. Fue en tiempos maravillosos cuando había una oficina de Google en San Petersburgo. Al llegar allí, estaba condenado a participar en Chrome DevTools: no tenía otra opción, porque vine como pasante al equipo de Chrome DevTools. Me dijeron: “Aquí hay un proyecto interno muy simple. Tenemos una API genial que nos permite tomar todo el código JavaScript, procesarlo de alguna manera, devolverlo y decirle a Chrome que ejecute otro JavaScript en lugar del JavaScript que nos llegó ".
Teníamos tal API, y sobre la base de que era posible construir un árbol AST. Recuerdo que sobre los árboles AST hubo
un excelente informe sobre HolyJS. Era necesario analizar el árbol AST e instruir el código de tal manera que midiera el tiempo de ejecución, y realmente escribir un generador de perfiles de herramientas. Y fue un proyecto de internet, todavía lo tengo en algún lugar de GitHub. No ha estado funcionando en Chrome durante mucho tiempo, porque se le pidió a la API que usaba que lo cortara, era difícil de mantener. Estaba muy triste ese día, porque fue la API en la que se construyó todo el proyecto: "eliminarlo". Y lo borré. Después de tres meses, pasé de pasantes a ingenieros, me quedé con Google y comencé a hacer todo lo relacionado con JavaScript. Comencé con algo muy simple: tuve que arreglar console.log (). Y luego sucedió gradualmente que la parte principal del equipo de herramientas relacionadas con JavaScript abandonó el equipo por alguna razón, y me quedé con casi todo el JavaScript. En ese momento daba mucho miedo, pero me preparé y gradualmente comencé a hacer algo, a entender algo.
Al mismo tiempo, JavaScript desarrollado, como sabemos, asinks, promesas aparecieron allí. Ahora ya tenemos async / wait, las funciones de flecha aparecieron en todos los marcos posibles, por lo que necesitábamos puntos de interrupción en línea (no había forma sin ellos), y lo hice, hice, hice muchas de estas pequeñas mejoras. Las pilas asíncronas resultaron ser mucho trabajo, este es un modelo asíncrono que describe la asíncrona en JavaScript en un lenguaje muy simple.
Y dado que no puede trabajar en Chrome DevTools en la interfaz de JavaScript y no sabe nada sobre el motor V8, en el transcurso de todo este trabajo, gradualmente tuve que pasar de contrabando cada vez más a V8. Tengo muchos parches allí. En algún momento, cambiamos el backend de JavaScript del código de Chrome al código V8. Esto, por supuesto, era lógico desde el principio, pero históricamente no estaba allí. Al mismo tiempo, Node vino a nosotros, teníamos que admitirlo de alguna manera, y decidimos que si podemos depurar V8, y Node parece usar V8, ¿por qué no hacemos que Node sea compatible con nosotros? Y lo hicimos, en este proyecto no fui el más importante, pero ayudé activamente a quienes lo hicieron. He estado haciendo todo esto en Google durante unos cinco años.
Dmitry: ¿Qué consideras el más genial y más difícil de estos?Alexei: Por alguna razón, lo último se recuerda mejor. Y el último fue un proyecto interesante que hicimos. Esto está ahora en la consola de Chrome DevTools, cuando escribe, puede ver el resultado en vivo de hacer lo que escribe. Si desea probar nuevas características de JavaScript (en ese momento era BigInt), simplemente imprima en la consola, vea inmediatamente el resultado, y no necesita presionar "Enter" y obstruir su consola con mil millones de resultados. Y hacerlo bien es más difícil de lo que parece. Fue muy importante para nosotros que con la ejecución codiciosa de todas sus expresiones, no destruiríamos el estado de su programa, de lo contrario, todos nuestros usuarios estarían muy molestos. Y para hacer esto, tuvimos que tomar JavaScript, tomar V8 y agregarle la capacidad: ejecutar cualquier expresión, pero asegurarnos de que no cambie el estado de su programa. Y fue difícil, durante mucho tiempo y nadie lo ha hecho antes que nosotros, ya no hay tales motores JavaScript. No estoy seguro de que haya tales motores en absoluto. Tal vez en Java la hay (porque en Java, como sabemos, todo está allí), pero no estoy seguro. Y en ese momento lo hicimos.
Fue un proceso muy largo, que involucró a muchos equipos diferentes, porque era importante para nosotros no solo ejecutar sin “efectos secundarios”, sino también asegurarnos de que si de repente comienzas a ejecutar un bucle interminable (verdadero), no colgarás todo en el mundo, porque el flujo de JavaScript sigue siendo el mismo. Y esto fue un esfuerzo separado: resultó que al código de Chrome no le gusta cuando JavaScript termina en un momento aleatorio en el tiempo, en cuyo caso le gusta decir: "Mm ..." y se bloquea. Tenía que ser arreglado. Y nosotros también lo hicimos.
El proyecto de este trabajo dio como resultado que Google incluso obtuviera una patente. Google patentó no perseguirlo, sino, como la mayoría de las otras compañías (excepto el viejo Oracle, probablemente), protegerse si algo sucede si alguien se acerca a ellos y les dice: "Dudes, hiciste Google "Búsqueda, esto es malo, tenemos patentes". Y por alguna razón, esos tipos harán el depurador de JavaScript al mismo tiempo. Google dirá: "Y aquí tenemos una patente para el depurador de JavaScript". Bueno, los abogados de patentes saben mejor lo que está sucediendo allí, pero lo patentamos, fue divertido. Google entrega una pequeña pieza del rompecabezas cuando obtienes una patente. El es muy genial. Y fue muy interesante, porque nadie había hecho esto antes, y lo logramos.
Dmitry: Y parece que algo simplemente se muestra en la consola.Alexei: Sí, sí, todo es muy "simple", por supuesto. La cita de alguien era que cualquier tecnología bien hecha es indistinguible de la magia.
Dmitry: Bueno, sí, interesante. ¿Y qué de lo que realmente quería hacer no podía hacerse? Algo mas? ¿Más poderoso?Alexei: Esta es una pregunta muy peligrosa. Siempre quieres hacer todo, y nunca hay suficiente tiempo. Por supuesto, me gustaría terminar las cosas que comenzamos, pero no lo terminé. Este es un modelo asíncrono, y la depuración asíncrona todavía tenía que completarse, por supuesto, y lo hizo más obvio para el usuario, para tomar algunos pasos más. No estoy seguro de qué hacer allí, pero por lo importante que quería terminar: en V8 hay un mecanismo similar a
HotSwap en Java y con tecnologías similares, cuando puede tomar un fragmento de código en su programa que se está ejecutando en este momento y actualizar la ganancia. Por ejemplo, se decidió por una excepción y sabe cómo solucionarlo, lo arregla inmediatamente allí, guarda el archivo y todo funciona más lejos, y como si no hubiera excepciones: todo se solucionó en vivo. Esta es una herramienta muy buena. Algunas personas piensan que incluso, en cierto sentido, puede reemplazar la depuración, porque gradualmente escribes el código en pequeños pedazos, puedes ver de inmediato lo que sucede; prácticamente no hay necesidad de depurar después de eso.
Y durante mucho tiempo, hace unos 9-10 años, tuvimos un código que hizo esto. Fue escrito un poco en otro mundo, en una realidad diferente: había un V8 diferente, no había todos estos Ignition, TurboFan y todo lo demás. No estoy seguro de que en ese momento incluso Crankshaft estuviera allí, es el compilador anterior en V8. No habia nada. Y async / wait no estaba allí tampoco, por supuesto. El código era muy antiguo, utilizaba algunas utilidades internas de V8 muy antiguas que solo admitían este código, porque en ese momento nadie quería entender este código y reescribirlo.
En algún momento, me senté y lo reescribí, y comenzó a chocar menos. Pero todavía dice muy a menudo que no puede editar su código, porque, por ejemplo, no hay suficiente soporte para generadores. Al escribir este código, había un generador por millón de líneas de código en JavaScript. Y cuando tenemos async / await, cada función async / await es en realidad un generador en sí mismo. Por lo tanto, si solicita editar el código con async / wait, se sentirá decepcionado.
Y dado que todavía son herramientas para desarrolladores y depuración, hay una característica desagradable: si no funcionan dos veces de cada diez cuando usan la herramienta, ya no la usarán. Y me gustaría mucho terminarlo. Tal vez lo terminemos, porque ahora probablemente traiga V8 a mi nuevo lugar de trabajo y debido a esto puedo seguir trabajando en él.
Dmitry: ¿Esto podría funcionar exclusivamente durante la depuración, o teóricamente podría cambiar una parte de la aplicación en alguna producción de aplicaciones de una sola página?Alexey: Desde el punto de vista de V8, en producción es más fácil cambiar, más difícil cambiar cuando estás en pausa. Si está en pausa, entonces tiene el seguimiento de la pila actual, que ya se está ejecutando. Es necesario actualizar este código y forzar que toda esta pila actual, que se refiere a algunas variables en su código, continúe funcionando. Y cuando solo tienes producción, puedes esperar el momento en que JavaScript termine (esperemos que no tengas un tiempo (verdadero) allí), y en ese momento todo se reemplaza imperceptiblemente.
Y es mucho más simple, ya que simplemente puede reemplazar el código, no necesita actualizar todos los enlaces. Y la principal dificultad es, por supuesto, reemplazar todos los enlaces, reiniciar todos los marcos, reiniciar los generadores, etc.
Alex: De repente tuve una pregunta sobre el uso de Chrome DevTools como IDE. Existe tal función cuando edita JavaScript y de alguna manera puede vincularlo al sistema de archivos, y lo mismo con los estilos. Y tengo muchas preguntas para él, porque no funciona. Y soy una persona perezosa, me gusta arreglarlo en un solo lugar, por ejemplo.Alexei: La pregunta, aparentemente, es por qué no funciona. Es importante decir inicialmente que las DevTools de Chrome nunca fueron un IDE, nunca se posicionaron como un IDE. El IDE es un proyecto de una escala diferente, requiere otros esfuerzos y más personas. Chrome DevTools se creó primero como herramienta y luego como editor. A diferencia de los IDE, que aparecen como un editor, y luego agregan un depurador, complementos, etc.
Al mismo tiempo, entendimos que sería muy agradable para nuestros usuarios editar y guardar, hubo varios intentos de hacer esto, ahora, probablemente, el segundo o tercer intento ... Pero todo se reduce al hecho de que en la web, teniendo en cuenta la existencia de todos estos compiladores CSS de paquete web Y todo lo demás, una tarea muy trivial es aplicar los cambios de nuevo. Cambia el código que ve dentro de la página, necesita comprender de dónde proviene este código en su página y aplicar cuidadosamente el cambio.
Por lo tanto, por otro lado, podemos decir que simplemente podemos hacerlo para trabajar para personas que no tienen configuraciones tan complejas, pero, desafortunadamente, este es un porcentaje muy pequeño de nuestros usuarios. Ahora todos tienen webpack, Babel, etc. Y se transponen fácilmente y hacen algo en una dirección, pero obtener información en la dirección opuesta es un problema. Para CSS y para SASS, esto se hizo de una manera mágica, y a veces parece funcionar, no lo usé.
Si esto cambiará en el futuro, aún puede preguntar. Puede usar el código de Visual Studio o su IDE favorito (WebStorm u otra cosa), editar el código allí, y Chrome DevTools intentará aplicar estos cambios en vivo. Pero, de hecho, tenemos un proyecto separado para nuestra interfaz para Node, probablemente hablaremos de eso incluso más tarde, funciona un poco mejor allí, porque, gracias a Dios, Node tiene el nivel máximo de compilación y compilación TypeScript en JavaScript. Y ya es difícil allí, pero todavía espero que en Node la mayoría de los paquetes y módulos estén escritos en JavaScript puro sin pasos de compilación intermedios. No respondí la pregunta, pero como pude.
Dmitry: ¿Qué piensas, cómo Chrome DevTools se desarrollará más en principio? ¿Cuáles son las mejores cosas que puedes esperar de él?Alexey: Esta es una pregunta difícil. En algún momento, apareció una persona en Google I / O que creó otra herramienta conveniente para los diseñadores. Esta extensión para Chrome, lamentablemente, no recuerdo el nombre. Y agrega directamente en la parte superior de su página algunos elementos que hacen que sea más fácil para usted como diseñador editar y hacer todo. Y había ideas de que Chrome DevTools podría ser una mejor herramienta para los diseñadores. Esta ya es una herramienta bastante conveniente que puede, por ejemplo, mirar CSS, etc., pero aún puede hacerlo mucho más ideal y conveniente. Por ejemplo, edición más conveniente de propiedades flexibles y otras pequeñas mejoras.
Y hay una parte importante de trabajar en Chrome DevTools: el proyecto es muy grande, tiene muchos usuarios y una gran cantidad de errores que cualquiera puede presentar en
crbug.com . Deben repararse, hay muchos de ellos y se gasta mucho tiempo solo para que todo funcione. Para la depuración de la edición en vivo de JavaScript, de la que hablamos, hotswap puede ser un buen próximo paso, pero puede o no, no lo sé.
Alexei: Chrome DevTools, me parece, es objetivamente el software más sofisticado para ayudar a los desarrolladores web. Pero hay otros navegadores: Safari, Edge todavía está allí, Firefox nuevamente. ¿Hay alguna herramienta que me gustaría sacar de otros navegadores en Chrome DevTools? ¿Hay algo que te guste, lo genial que está hecho?Alexey: los desarrolladores de Chrome DevTools miran regularmente otros navegadores. Por lo interesante que noté allí recientemente, recuerdo que Safari tenía una consola muy conveniente. Estructuraron muy bien la salida a la consola y agregaron navegación usando las flechas en los resultados. Puede seleccionar un objeto allí, presionar "derecha" - se abrirá. Fue muy conveniente. Como resultado, ahora esta función está en Chrome DevTools.
En Firefox, por las cosas interesantes en DevTools, me parece que admiten un poco mejor la edición visual de todas las propiedades CSS, con esto quiero decir propiedades como flex y otras, te muestran la cuadrícula directamente en la parte superior de la página y puedes moverla hacia arriba abajo Esto es genial, lo tenemos parcialmente, pero no completamente. Firefox DevTools, creo, actualmente tiene, con mucho, el mejor soporte para WebAssembly. Si por alguna razón tiene que escribir código WebAssembly, entonces son mucho mejores que nosotros, porque no teníamos nada hace seis meses, ahora no lo he comprobado. Creo que están invirtiendo mucha energía en esto.
En cuanto a Safari ... en cierto modo, Chrome DevTools es una bifurcación del Web Inspector de Safari, por lo que tomamos todo lo mejor que tenían.
Me acordé de lo importante! Probablemente solo Firefox tiene Depuración de viajes en el tiempo. En una Mac, en las compilaciones nocturnas de Firefox, puede disfrutar de la depuración de viajes en el tiempo. Me quedé callado sobre él cuando me preguntaron sobre los siguientes pasos importantes: suena muy genial, muy monumental, todavía no creo que sea muy útil. Punto de vista personal. Pero lo tienen, puedes intentarlo, si te ayuda, será una nueva herramienta interesante.
: . , , -- . , ( ) , , CSS. , - , .
, , . ? , ? , - ?: . ? , ,
crbug.com , feature request. feature request', , : , , . , . :
Chrome DevTools, Chrome DevTools, ,
. , , , .
, , , — , , Chrome. , , , Chrome DevTools , . , -, , Chrome . -, - , , , - , , … , , .
: Google? :): Google , , . - , layers panel, -. , , . , , , , . , , .
? Cmd/Ctrl + Shift + P, Show layers — . Discoverability Chrome DevTools — , , , . - , . , - . , , , .
: , , , .: .
: , - . . , , .: HolyJS. .
: - , , - , . , - . , : - , - . - .
: , - Chrome, , , . . — , . — . - - , ?: . , Chrome . -, Chrome, .
GitHub
Chrome DevTools ( ), , DevTool' Chrome, . , , - Chrome DevTools, . , - , -, . - . , cookies.
, DevTool' , , . , JavaScript', CSS, HTML . single-page application. , - - , , , .
— - , (, - ), Chrome, , , .
cs.chromium.org , .
, , « », Chrome , good first bug — , .
, , JavaScript — V8 , Chrome. , , , . - , - , - Chrome, Node. , - Node, Node, Chrome. , , .
, V8 - , - DevTool' . Chrome, , - , 15 Chrome.
: , Chrome?: , Lenovo , Google Chrome . Xeon, 64 128 — . , 32 . , . , GTA 2 .
, - . - — Google , , Google , . , , . Chrome C++, . , .
: .: , SSH - , , . - , SSH. Mac, : « ». Mac', , , - , -, , , .
: . , ?: -, . Cessna, , 17 . - 17 Chrome DevTools.
: , -, , . , , . -, ndb ( - ), . , , Chrome DevTools, - V8 Node. ndb, - Node? - ?: ndb — . Chrome DevTools Node . : Node URL, , . dedicated — Node. chrome://inspect, «open dedicated frontend», - . , , . - , , , . , , , — . value, , , .
, , . -, npm — «npm install -g ndb» — . Chrome, . Chrome, . 2,6 Chrome DevTools . . .
, - value: child-, , . ndb .
, Node Node. , , , - Node, , .
- Visual Studio Code, Node. . - IDE , Python, , . Node. : Chrome DevTools — , ndb — Node.
, , Google Chrome Labs — GitHub- , . , , 15 Hacker News - . , ( , ), - . .
, , Node . , Node Windows, Linux Mac, — , , .
, , , , n . - , , . , environment- Windows , Linux — , . . Windows-, - .
, . - , , , . , . , — , Node, , , . , , , , . ndb, ,
Carlo . Carlo — Electron. Electron , , Electron .
: Google, Chrome?: , ndb. , , ndb.
: , . Chrome DevTools, , , ? , , ?: Chrome DevTools? . , , , Chrome DevTools, , JavaScript. , , , , Java, JavaScript, , - . , .
: -, . -. , , C++. , Chrome DevTools , . , , - -, , , . Chrome DevTools , - C++, -.
C++, JavaScript, CSS…
HolyJS, , CSS — , , . , , ! .
, C++, -, . - , , , , . ,
careers.google.com , , , Chrome DevTools, , , software engineer-, . software- , , : « Chrome DevTools».
: ++? - .: . , , — , , , . : - , , , - .
, C++ - , . , «Hello, world!», . , , Chrome. C++ Chrome, C++ 11, . Boost .
: . , - 239, ? - ? single page application.: , , , , . , computer science- . : — , — , .
, . Google , Google . , , . , . computer science- , …
239, , , , , . , , - . , JavaScript — ? Esto no es un problema , a, b c, JavaScript, , JavaScript . JavaScript — , .
, CS- , . , - , , . , , , , -. , , computer science- — , , must have, . , , , , . , .
: , - JavaScript, -, , - ?: . , , , - , , , Stack Overflow, , . , , . , async- , garbage collector .
: . : ? , , ? ? .: . , CSS . , , . — Google-, - . , , , , , . , , . .
, — . . , , DeepMind
StarCraft (. .: Zest, soO Stats ) — Reinforcement Machine Learning. Reinforcement Machine Learning . youtube, 15 , , .
, --, - , , . , , . , CSS.
: ?: , . , . , . , YouTube — CSS. , , . , , — .
: . ? ?: , , . Node.js, Node. , . , , - - , — , . , , - , , . Esto es complicado
, — « Node.js» — , , , , Node.js, . , , , . , .
: . , . , -, ? - , , - — , . ?: , . , , . , , - . , - , , - , -. . — DevTools: — , , — .
. , , . , , , JavaScript-, , . . , , , — .
, (« , CSS -») . , (diversity, CSS ), . , , . . — . — , . — .
: : HolyJS?: HolyJS, . , , . , , , .
: , ...: , . — . . . HolyJS , , , . , , . , , , , , — . . - .
« Chrome DevTools» ( ) HolyJS, 24 . YouTube , , .