January 25, 2018 at 13:20Dynamic code analysis with Iroh.js
Vladislav Vlasov, a software engineer at Developer Soft and a teacher of Netology , wrote a series of articles on EcmaScript6 for the blog, in the first part of which he examined dynamic code analysis in EcmaScript using Iroh.js.
Code analysis tools are a useful tool that allows you to detect and identify errors and features in the code. Code analysis can be static and dynamic. In the first case, the source code is parsed and analyzed without executing it; in the second, the execution takes place in a managed sandboxing environment, which provides meta-information about the elements of the application during its execution.
The language EcmaScript, having duck typing (duck-typing), commonly used static analysis means to allow without performing detect potentially dangerous situation in the code: mismatch types transmitted and received arguments, incorrect operations on variables inappropriate type, non-executable code sections, and so on. The most popular are solutionsTypescript and Flow , based on the extension of the language with special syntax.
Unlike programming languages, in which a strict type system is an integral part of them, and accordingly, descriptions of types of variables and objects are already embedded in the source code, EcmaScript, on the contrary, requires a manual description, which is dependent and different for individual means of static typing. This entails the following disadvantages :
The solution to the above disadvantages is Iroh.js , a dynamic analyzer of EcmaScript code . Iroh.js allows you to analyze and manipulate the code during execution, while there is no need to modify the source code or provide it with annotations, as is the case with static typing tools.
Iroh.js allows you to record a real-time code execution diagram, obtain information about the state of objects and the call stack, and also control the program’s behavior on the fly.
Iroh.js only tracks call stacks for modified code and cannot provide meta-information or on-the-fly modification for native runtime functions or imported library elements. As a rule, it is not necessary to analyze and modify the behavior of library code, but if necessary it is also possible - the scope of Iroh.js is determined by the code that was added to the sandbox of Iroh.js by means of preliminary patching.
Iroh.js can be added to the node.js application as an npm package and can be run directly in the browser , which can be useful for dynamically analyzing small independent code fragments or creating demos.
As the simplest example, we can consider two implementations of the function for calculating Fibonacci numbers - a naive version with a full recursive tree, and an optimized solution with memoization of the previous results. The source code of the proposed functions is presented below:
Now you can perform a dynamic analysis of these functions. Of course, both implementations provide the correct result, but it
Obviously, the point is to preserve intermediate computations and optimize tail recursion. The execution flow analyzer based on Iroh.js allows you to see this clearly:
The dynamic analyzer makes it easy to identify that in the first, non-optimal case, to calculate the 6th Fibonacci number, the number of recursive calls reaches 41, while in the second - only 7. With an increase in the number of the calculated number, in the first case, the growth of recursive calls will be exponential, and in the second - linear.
Although the task of calculating Fibonacci numbers is extremely simple, and the above optimization is trivial and widely known, Iroh.js allows you to track the graph of function calls and find redundant or incorrect calls.
By displaying the actual values of the arguments and variables, the code can be debugged at runtime without adding synthetic-like
In the process of analyzing the behavior of an application with potentially complex and non-linear logic, it may be necessary to track the moment when the value of a certain variable or object has changed, or, conversely, to initiate changes in the current value to a special one at a certain moment. All this can be done with Iroh.js.
As a simple example, you can consider the code of a web page that executes AJAX requests to several web resources, however, for debugging purposes, you need to intercept access to some of them, replacing the URL with a debugging stub. A simplified piece of source code might look like this:
Suppose you want to replace the URL
Iroh.js allows you to analyze and intercept function calls and allocation of variables, providing the ability to modify their values and behavior on the fly. More examples can be found here .
Iroh.js is a powerful and functional tool for dynamic code analysis in EcmaScript. This tool can be used both for code analysis, including building a graph of calls, displaying actual types and values in variables and objects, and for modifying code on the fly, including event-based code corrections.
Dynamic analysis is a rather complicated method, but for EcmaScript, given duck typing, the presence of host objects and native functions that allow you to change code behavior on the fly, this is the only way to analyze and debug code during execution.
Iroh.js can also use code to create functional tests without first having to modify it to export values. Based on Iroh.js you can measure performanceproblematic code sections and even implement an online IDE development environment with the ability to step by step debugging and time-traveling debug, that is, executing the code in the reverse order to search for expressions that served as a source of error or incorrect calculations.
Netology courses on the topic:
Static and dynamic code analysis
Code analysis tools are a useful tool that allows you to detect and identify errors and features in the code. Code analysis can be static and dynamic. In the first case, the source code is parsed and analyzed without executing it; in the second, the execution takes place in a managed sandboxing environment, which provides meta-information about the elements of the application during its execution.
The language EcmaScript, having duck typing (duck-typing), commonly used static analysis means to allow without performing detect potentially dangerous situation in the code: mismatch types transmitted and received arguments, incorrect operations on variables inappropriate type, non-executable code sections, and so on. The most popular are solutionsTypescript and Flow , based on the extension of the language with special syntax.
Unlike programming languages, in which a strict type system is an integral part of them, and accordingly, descriptions of types of variables and objects are already embedded in the source code, EcmaScript, on the contrary, requires a manual description, which is dependent and different for individual means of static typing. This entails the following disadvantages :
- the static typing tool introduces a set of synthetic instructions into the language, so the source code must be processed by a transpiler, like Вabel with the appropriate plug-ins, or TypeScript compiler, respectively;
- EcmaScript is dynamic in nature, and in many cases static typing is simply not applicable: for any objects received from the external environment, the data type is string or any.
Iroh.js - solution for dynamic analysis of EcmaScript applications
The solution to the above disadvantages is Iroh.js , a dynamic analyzer of EcmaScript code . Iroh.js allows you to analyze and manipulate the code during execution, while there is no need to modify the source code or provide it with annotations, as is the case with static typing tools.
Iroh.js allows you to record a real-time code execution diagram, obtain information about the state of objects and the call stack, and also control the program’s behavior on the fly.
Iroh.js can be used to obtain information on the following aspects of runtime: function call tree, actual data types of objects and variables, implicit conversions to an object and primitive type (boxing / unboxing), including conversions to a string.Iroh.js functions due to preliminary correction of the code in such a way as to record events that occur without changing the logic and execution scheme of the original program. This provides the ability to add listener functions for later tracking and reaction to actions. Iroh.js not only allows you to track the behavior of the code in runtime, but also modify it, intercepting the call of certain functions, setting an overlapping value for variables, and so on.
Iroh.js only tracks call stacks for modified code and cannot provide meta-information or on-the-fly modification for native runtime functions or imported library elements. As a rule, it is not necessary to analyze and modify the behavior of library code, but if necessary it is also possible - the scope of Iroh.js is determined by the code that was added to the sandbox of Iroh.js by means of preliminary patching.
Iroh.js can be added to the node.js application as an npm package and can be run directly in the browser , which can be useful for dynamically analyzing small independent code fragments or creating demos.
Example 1. Analysis of the call graph for the function of calculating Fibonacci numbers
As the simplest example, we can consider two implementations of the function for calculating Fibonacci numbers - a naive version with a full recursive tree, and an optimized solution with memoization of the previous results. The source code of the proposed functions is presented below:
function fibonacciNaive(n) {
if(n <= 0) return 0;
return fibonacciNaive(n - 1) + fibonacciNaive(n - 2);
};function fibonacciMemoized(n, x1 = 0, x2 = 1) {
if(n <= 0) return x1;
return fibonacciMemoized(n - 1, x2, x1 + x2);
};Now you can perform a dynamic analysis of these functions. Of course, both implementations provide the correct result, but it
fibonacciMemoizedworks much faster than fibonacciNaive, and also consume less memory. Obviously, the point is to preserve intermediate computations and optimize tail recursion. The execution flow analyzer based on Iroh.js allows you to see this clearly:
 |  |
Although the task of calculating Fibonacci numbers is extremely simple, and the above optimization is trivial and widely known, Iroh.js allows you to track the graph of function calls and find redundant or incorrect calls.
By displaying the actual values of the arguments and variables, the code can be debugged at runtime without adding synthetic-like
console.loginstructions.Example 2. Modification of objects and variables on the fly
In the process of analyzing the behavior of an application with potentially complex and non-linear logic, it may be necessary to track the moment when the value of a certain variable or object has changed, or, conversely, to initiate changes in the current value to a special one at a certain moment. All this can be done with Iroh.js.
As a simple example, you can consider the code of a web page that executes AJAX requests to several web resources, however, for debugging purposes, you need to intercept access to some of them, replacing the URL with a debugging stub. A simplified piece of source code might look like this:
const urlAddresses = [‘ADDR1’, ‘ADDR2’, ‘ADDR3’];
const resultPromise = Promise.all(urlAddresses.map(addr => fetch(addr).then(res => res.text()).catch(err => new Error(err))));
resultPromise.then(result => console.log(result))Suppose you want to replace the URL
ADDR3with ADDR3-test. Using Iroh.js, the corresponding operation can be carried out as follows:const stage = new Iroh.Stage(code); // code - вышеуказанный код в строковом виде
const listener = stage.addListener(Iroh.CALL);
const originalFetch = fetch;
listener.on("before", function (e) {
if (e.object === fetch) {
e.call = function (url) {
const targetUrl = url === ‘ADDR3’ ? ‘ADDR3-test’ : url;
return originalFetch.call(null, [targetUrl].concat(arguments.slice(1)))
});
}
});
eval(stage.script);Iroh.js allows you to analyze and intercept function calls and allocation of variables, providing the ability to modify their values and behavior on the fly. More examples can be found here .
conclusions
Iroh.js is a powerful and functional tool for dynamic code analysis in EcmaScript. This tool can be used both for code analysis, including building a graph of calls, displaying actual types and values in variables and objects, and for modifying code on the fly, including event-based code corrections.
Dynamic analysis is a rather complicated method, but for EcmaScript, given duck typing, the presence of host objects and native functions that allow you to change code behavior on the fly, this is the only way to analyze and debug code during execution.
Iroh.js can also use code to create functional tests without first having to modify it to export values. Based on Iroh.js you can measure performanceproblematic code sections and even implement an online IDE development environment with the ability to step by step debugging and time-traveling debug, that is, executing the code in the reverse order to search for expressions that served as a source of error or incorrect calculations.
From the editors
Netology courses on the topic:
- profession " Frontend-developer ";
- profession " Web developer ";
- JavaScript Basic Course Online Program ;
- online program " Node, AngularJS and MongoDB: developing full-fledged web applications ";
- Online program " JavaScript in the browser: creating interactive web pages ."