JavaScript tracing, debugging, profiling – filling the gaps
for Years I used Chrome DevTools, Firebug and even Opera Dragonfly for debugging, traceroute and profiling my JavaScript code. Notice that I used these wonderful tools not only for JavaScript but for tracking network events, debug, CSS, DOM.
However, sometimes I get into some zones of otchuzhdeniya in which the above tools to help me could not for certain reasons, and I would like.
So it turns out that I often view the JavaScript code with which I was slightly acquainted, if not familiar. For example, simply examine third-party code for the overall development, trying to figure out how to work some jQuery extension that does not want to work so I thought, fix bugs, get acquainted with the code of the MVC framework, which I want to understand better, view code colleagues on the project, sometimes even your own code that I forgot how it works (I hope I'm not alone). So is that even finding the place where your exciting journey in this code (split into many files, sometimes # often confusing) is a puzzle.
After a cursory examination, and the realization that a humble contemplation of kilobytes of source code is not particularly productive, I run the code. Enthusiastically put a breakpoint in some familiar place, a little discouraged the next time I get in the debugger in a minified jQuery (and who does not falling down?), annoyed when once again step over in the debugger through the desired piece of code, violently jump loops to not get stuck there for a thousand iterations, zataya breath put conditional breakpoints, apathetic hit F11 again and again in fear of missing something important. Sound familiar?
In certain cases, also comes to rescue console, but all of you probably remember the “magic” feeling when I forget to remove console.log (or, God forbid, alert) before commit. Fortunately for some there comes to the aid of another and jshint, which subtly recalls. Worse, do you think that comes to the rescue console and get soulless “console is undefined ”. If you didn't, you're either lucky or a beginner.
How about a crazy Heisenbug? Bug opened, F12 is pressed, a breakpoint placed with unerring precision and cold calculation of a hunter of a professional, the steps are executed, and the bug's gone?
Don't even want to start a sad song error reproducible only in certain browsers/devices/platforms where there is no saving DevTools. No, sometimes (though not always) available alternatives, often no longer supported, heavy, difficult to install and use, does not have the functionality you need. Yes, older versions of IE, I look you. In fairness, despite the fact that a witch hunt is always fun, a sinner not only older versions of IE. The creation of an environment for debugging on mobile devices is not less than sad (specific platform requirements, simulation, additional software, SDK, device configuration, etc.) — Androind, iPnone.
Finally, the performance profiling. With excellent service JsPerf it is possible for different browsers to look at other people or to drive your optimization ideas, this is when the ideas are. Chrome DevTools and Firebug have built-in profilers, taking exact numbers from the engines V8 and SpiderMonkey, but I never was convenient to use interface, where these figures are presented, didn't like the fact that profiling is necessary to constantly turn on and there is no way to just enable it once and have constantly enabled by default, also has never been fun insert console.profile/console.time to code (especially forgetting to remove them).
Given the above, one day I had an idea – a good idea would be to have a tool that solves at least part of the aforesaid problems and
the
If the above issues and proposals for their solution not like you, then I guess you can not read, because next will be what can be called is (though free at the moment).
I'm glad if you have not lost you after the disclaimer about advertising. Like most of my colleagues, imposed on me the ancient curse of programming “napisalem Tulum codorus nemogut Nautilus”, therefore, please welcome spy-js: a new tool for JavaScript, designed to fill the gaps of existing tools, take a look at debugging, profiling, tracing, from a different angle. The project is in beta stage, but the beta version already knows how most of the above mentioned wish list. The General direction of development is not to replace existing capabilities in DevTools/Firebug, and to provide an alternative solution to problems and fill in any gaps of these instruments.
Spontaneously obeying the following law Atwood, the fact that everything can be written in JavaScript will be written on it, spy-js is mainly written in the language for which it was written (ek, wrapped).
Architectural spy-js is a web app on nodejs and a browser client. How it works: the browser in which the page is loaded with scripts which will be configured to use a proxy server (web application on nodejs). Web application proxy requests and if the requested resource is a JavaScript file, modifies it before sending back to the browser. Modification of the file is a box instrumentation instructions. When the modified code runs in the browser back to the server is sent information on its implementation, which after processing becomes available in the UI spy-js, where almost in real time, you can watch the events.
The project would never have been completed without the use of wonderful projects with open source such as: nodejs, esprima, express, grunt, socket.io, jQuery, knockout.js, underscore, ace, bootstrap. Not all listed projects are used.
At this moment free beta version of spy-js is available for download on http://spy-js.com. The source code of the project is not open. Documentation, configuration examples, the possibility of having bugs, ask questions and so on, at the moment is by using the public github repository. Questions you can also ask on stack overflow with the tag spy-js.
At this stage of my financial investment in the project is not so great, I'm working on it most of my free time. My plan is to use the feedback from those whom the tool seem useful to continue its development to the stage when/if I will be able to offer a paid license and invest in the product more time/support/finances.
I am sincerely grateful for any support, suggestions, feedback, disseminate information about the project. It really inspires and helps me do what I do. I hope with your help I will be able to contribute to the development of JavaScript tools.
Article based on information from habrahabr.ru
However, sometimes I get into some zones of otchuzhdeniya in which the above tools to help me could not for certain reasons, and I would like.
So it turns out that I often view the JavaScript code with which I was slightly acquainted, if not familiar. For example, simply examine third-party code for the overall development, trying to figure out how to work some jQuery extension that does not want to work so I thought, fix bugs, get acquainted with the code of the MVC framework, which I want to understand better, view code colleagues on the project, sometimes even your own code that I forgot how it works (I hope I'm not alone). So is that even finding the place where your exciting journey in this code (split into many files, sometimes # often confusing) is a puzzle.
After a cursory examination, and the realization that a humble contemplation of kilobytes of source code is not particularly productive, I run the code. Enthusiastically put a breakpoint in some familiar place, a little discouraged the next time I get in the debugger in a minified jQuery (and who does not falling down?), annoyed when once again step over in the debugger through the desired piece of code, violently jump loops to not get stuck there for a thousand iterations, zataya breath put conditional breakpoints, apathetic hit F11 again and again in fear of missing something important. Sound familiar?
In certain cases, also comes to rescue console, but all of you probably remember the “magic” feeling when I forget to remove console.log (or, God forbid, alert) before commit. Fortunately for some there comes to the aid of another and jshint, which subtly recalls. Worse, do you think that comes to the rescue console and get soulless “console is undefined ”. If you didn't, you're either lucky or a beginner.
How about a crazy Heisenbug? Bug opened, F12 is pressed, a breakpoint placed with unerring precision and cold calculation of a hunter of a professional, the steps are executed, and the bug's gone?
Don't even want to start a sad song error reproducible only in certain browsers/devices/platforms where there is no saving DevTools. No, sometimes (though not always) available alternatives, often no longer supported, heavy, difficult to install and use, does not have the functionality you need. Yes, older versions of IE, I look you. In fairness, despite the fact that a witch hunt is always fun, a sinner not only older versions of IE. The creation of an environment for debugging on mobile devices is not less than sad (specific platform requirements, simulation, additional software, SDK, device configuration, etc.) — Androind, iPnone.
Finally, the performance profiling. With excellent service JsPerf it is possible for different browsers to look at other people or to drive your optimization ideas, this is when the ideas are. Chrome DevTools and Firebug have built-in profilers, taking exact numbers from the engines V8 and SpiderMonkey, but I never was convenient to use interface, where these figures are presented, didn't like the fact that profiling is necessary to constantly turn on and there is no way to just enable it once and have constantly enabled by default, also has never been fun insert console.profile/console.time to code (especially forgetting to remove them).
Given the above, one day I had an idea – a good idea would be to have a tool that solves at least part of the aforesaid problems and
the
-
the
- allows you to see what events are happening in your code right now to open the call tree and highlight the execution path of code the
- allows you to filter the scripts and events and monitor only what is interesting to me in the moment the
- allows you to execute scripts in the application and then to analyze what occurred, including access to the data at execution-time the
- allows you to trace, debug, profile your code in any browser/device/platform the
- allows quick, convenient and constantly see the performance of the functions, just to see what recently added can squander the performance, also to support decision making what you can try to optimize the
- allows you to see highlighted, let it run a particular scenario the
- allows to learn the unfamiliar code by analyzing the process execution
If the above issues and proposals for their solution not like you, then I guess you can not read, because next will be what can be called is (though free at the moment).
I'm glad if you have not lost you after the disclaimer about advertising. Like most of my colleagues, imposed on me the ancient curse of programming “napisalem Tulum codorus nemogut Nautilus”, therefore, please welcome spy-js: a new tool for JavaScript, designed to fill the gaps of existing tools, take a look at debugging, profiling, tracing, from a different angle. The project is in beta stage, but the beta version already knows how most of the above mentioned wish list. The General direction of development is not to replace existing capabilities in DevTools/Firebug, and to provide an alternative solution to problems and fill in any gaps of these instruments.
Spontaneously obeying the following law Atwood, the fact that everything can be written in JavaScript will be written on it, spy-js is mainly written in the language for which it was written (ek, wrapped).
Architectural spy-js is a web app on nodejs and a browser client. How it works: the browser in which the page is loaded with scripts which will be configured to use a proxy server (web application on nodejs). Web application proxy requests and if the requested resource is a JavaScript file, modifies it before sending back to the browser. Modification of the file is a box instrumentation instructions. When the modified code runs in the browser back to the server is sent information on its implementation, which after processing becomes available in the UI spy-js, where almost in real time, you can watch the events.
The project would never have been completed without the use of wonderful projects with open source such as: nodejs, esprima, express, grunt, socket.io, jQuery, knockout.js, underscore, ace, bootstrap. Not all listed projects are used.
At this moment free beta version of spy-js is available for download on http://spy-js.com. The source code of the project is not open. Documentation, configuration examples, the possibility of having bugs, ask questions and so on, at the moment is by using the public github repository. Questions you can also ask on stack overflow with the tag spy-js.
At this stage of my financial investment in the project is not so great, I'm working on it most of my free time. My plan is to use the feedback from those whom the tool seem useful to continue its development to the stage when/if I will be able to offer a paid license and invest in the product more time/support/finances.
I am sincerely grateful for any support, suggestions, feedback, disseminate information about the project. It really inspires and helps me do what I do. I hope with your help I will be able to contribute to the development of JavaScript tools.
Комментарии
Отправить комментарий