Writing Windows Phone JavaScript debugger for Apache Cordova
Friends, not so long ago there was another open source release of the Apache Cordova framework, you can learn the details from the announcement .
I’m in a hurry to share the details of one of the interesting features, which is not so obvious and described in the release, but which makes life easier for Apache Cordova plug-in developers, providing them with an almost unlimited field of activity. Please love and respect:
Below, I will show how you can use this feature to write a Windows Phone JavaScript debugger as a plug-in for Apache Cordova. The result you can see on the video below (watch with HD mode enabled)
')
Few application developers using Apache Cordova know about hooks , but they exist and even a long time ago. They are special scripts that a programmer can add to extend or change the standard behavior of the framework. With the release of release 4.0, this functionality has been significantly expanded, unified and made available to plug-in developers . All the details of using hooks can be found here .
And why might it even be needed? All Apache Cordova JavaScript Api is a plug-in (core or third party). The plugman module, which is responsible for plug-ins, supports a rather limited list of elements that you can include in the plugin, for example, add the necessary native dll or some additional files with native code. But, developing complex plugins you will encounter the problem that you need to create something that is not yet provided. For example, once, while working on a WebSQL plugin, we needed support for an additional cmd parameter, since we could not build under AnyCPU due to C ++ dependencies and we used undocumented hacks, implementation holes, and prayed that it would continue to work. Now you can officially add additional scripts (nodejs or any other executable file) to program additional necessary logic. Similar to npm-scripts .
To see how the hooks work and show their power, we will create a plugin for debugging JavaScripta on Windows Phone 8. The source code of the plugin can be viewed here .
1. Create a new plugin and put the open source JavaScript debugger Aardwolf inside. At the same time, the plugin.xml is almost empty.
2. Add scripts (hooks) for the Windows Phone 8 platform that will be executed during the build (pre_package) and after the application has started (after_run):
plugin.xml
3. Implement custom scripts functionality
scripts / injectDebugger.js - obfusts the source javascript files and moves them to a special place so that Aardwolf can recognize them. In order not to drag and dynamically connect aardwolf.js to the necessary html file, we write its content directly to cordova.js.
scripts / startDebugServer.js - the only task of this script is to launch the Aardwolf server on time with the application itself.
1. Install Apache Cordova
2. Create an application
3. Add our plugin
4. Run
I’m in a hurry to share the details of one of the interesting features, which is not so obvious and described in the release, but which makes life easier for Apache Cordova plug-in developers, providing them with an almost unlimited field of activity. Please love and respect:
CB-6481 Add unified hooks support for cordova app and plugins Below, I will show how you can use this feature to write a Windows Phone JavaScript debugger as a plug-in for Apache Cordova. The result you can see on the video below (watch with HD mode enabled)
')
What are Apache Cordova Hooks?
Few application developers using Apache Cordova know about hooks , but they exist and even a long time ago. They are special scripts that a programmer can add to extend or change the standard behavior of the framework. With the release of release 4.0, this functionality has been significantly expanded, unified and made available to plug-in developers . All the details of using hooks can be found here .
And why might it even be needed? All Apache Cordova JavaScript Api is a plug-in (core or third party). The plugman module, which is responsible for plug-ins, supports a rather limited list of elements that you can include in the plugin, for example, add the necessary native dll or some additional files with native code. But, developing complex plugins you will encounter the problem that you need to create something that is not yet provided. For example, once, while working on a WebSQL plugin, we needed support for an additional cmd parameter, since we could not build under AnyCPU due to C ++ dependencies and we used undocumented hacks, implementation holes, and prayed that it would continue to work. Now you can officially add additional scripts (nodejs or any other executable file) to program additional necessary logic. Similar to npm-scripts .
Windows Phone 8 JavaScript Debugger
To see how the hooks work and show their power, we will create a plugin for debugging JavaScripta on Windows Phone 8. The source code of the plugin can be viewed here .
1. Create a new plugin and put the open source JavaScript debugger Aardwolf inside. At the same time, the plugin.xml is almost empty.
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:rim="http://www.blackberry.com/ns/widgets" id="org.apache.cordova.debug.wp8" version="0.0.1-dev"> <name>WP8 Debugger</name> <description>Cordova WP8 Debugger Plugin</description> <license>Apache 2.0</license> <keywords>cordova,debug, wp8</keywords> <repo></repo> <issue></issue> </plugin> 2. Add scripts (hooks) for the Windows Phone 8 platform that will be executed during the build (pre_package) and after the application has started (after_run):
plugin.xml
<platform name="wp8"> <hook type="pre_package" src="scripts/injectDebugger.js" /> <hook type="after_run" src="scripts/startDebugServer.js" /> </platform> 3. Implement custom scripts functionality
scripts / injectDebugger.js - obfusts the source javascript files and moves them to a special place so that Aardwolf can recognize them. In order not to drag and dynamically connect aardwolf.js to the necessary html file, we write its content directly to cordova.js.
module.exports = function(ctx) { if(ctx.cmdLine.indexOf('--debug') <= 0) { // debugger should run in debug mode only return; } console.log('WP8Debugger: preparing js files for debugging...'); var serverRoot = path.join(ctx.opts.plugin.dir, 'Aardwolf'); var serverWwwCopyDir = path.join(serverRoot, 'files/www'); var platformRoot = path.join(ctx.opts.projectRoot, 'platforms/wp8'); console.log('Copy original www content'); if (fs.existsSync(serverWwwCopyDir)) { shell.rm('-rf', serverWwwCopyDir) } shell.cp('-rf', path.join(platformRoot, 'www/*'), serverWwwCopyDir); console.log('Rewriting js files'); rewriteFilesInDir(platformRoot, path.join(platformRoot, 'www')); console.log('config: ' + JSON.stringify(config)); console.log('inject Aardwolf to cordova.js'); var content = 'window.AardwolfServerUrl = "http://' + config.serverHost + ':' + config.serverPort + '";'; content += fs.readFileSync(path.join(serverRoot, 'js/aardwolf.js')).toString(); content += fs.readFileSync(path.join(platformRoot, 'www/cordova.js')).toString(); fs.writeFileSync(path.join(platformRoot, 'www/cordova.js'), content); console.log('WP8Debugger: done!'); } scripts / startDebugServer.js - the only task of this script is to launch the Aardwolf server on time with the application itself.
module.exports = function(ctx) { if(ctx.cmdLine.indexOf('--debug') <= 0) { // debugger should run in debug mode only return; } console.log('WP8Debugger: launching debug server...'); console.log('WP8Debugger: debug server host:' + config.serverHost); var serverRoot = path.join(ctx.opts.plugin.dir, 'Aardwolf'); shell.exec("explorer " + '"http://' + config.serverHost + ':' + config.serverPort + '"'); var cmdLine = 'node ' + path.join(serverRoot, 'app.js') + ' -h ' + config.serverHost; console.log(cmdLine); shell.exec(cmdLine); } Run
1. Install Apache Cordova
npm install -g cordova 2. Create an application
cordova create testApp cd testApp 3. Add our plugin
cordova plugin add location-of-cordova-debug-wp8 4. Run
cordova run wp8 --debug useful links
Source: https://habr.com/ru/post/241722/
All Articles