I have a test file on a remote machine and I want to walk through it with node-inspector. So, on the remote machine (Vagrantfile):
node-inspector &
mocha --debug-brk foo.test.js
Then, on my dev machine I open Canary and go to:
http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858
However, I'm not able to debug my test, since the debugger will break at the first line in node_modules/mocha/bin/_mocha, and my test file isn't visible in the Sources tab:
I tried setting a breakpoint inside _mocha, on line 398:
runner = mocha.run(program.exit ? exit : exitLater);
But when I try to 'step into', to see the run function execute, it doesn't step in. I can see output in the console, so it does execute though. If I set a breakpoint directly in the run function, it won't break there.
Also, the test file never appears in the "Sources" tab so I can't set breakpoints in it. I also tried adding a debugger statement to it but it still doesn't break there.
How can I make node-inspector show the test file, and step through it ?
node v0.12.0
node-inspector v0.10.0
mocha v2.2.4
I frequently run into this, and I don't know if there's a better solution (if there is I'll be glad to hear it), but I find I have to let the debugger advance to a point where it becomes aware of the additional files I want to debug. Without seeing more of your code I can't give a more specific suggestion about where to advance to, but try to figure out where the test files will be loaded in the source files that are available and advance to there. It'll gradually add more files to the Sources panel as code runs.
There are actually 2 problems:
breakpoints not respected
test files not visible
The first problem was fixed in the recently released node-inspector#v0.10.1. So, breakpoints will be respected anywhere.
There is still the second issue. As #JMM said, the list of files in the 'Sources' tab is dynamic, and test files won't appear there when the process breaks. What I ended up doing is setting a breakpoint just before the test function is run, in mocha/lib/runnable.js#266, on this line:
var result = fn.call(ctx);
fn is the test function. Once you step into it, the test file will appear in the Sources tab and the debugger's cursor will be on the first line of the test function.
Related
I'm trying to build, load and debug Selenium IDE extension in Chrome. I got the source code from https://github.com/SeleniumHQ/selenium-ide then ran yarn build and now I have a folder
<repo-root>\\packages\\side-recorder\\build
which contains manifest.json and all .js files listed in the manifest.json are located properly in relation to manifest.json This includes background.js file.
So it looks like build ran okay. I switch Chrome into developer mode, go to chrome://extensions and click "load unpacked", then navigate to "build" folder. The extension is added, but when I click onto its toolbar icon there's an error message in Chrome console which says it cannot connect to engine.io server. I want to find the piece of code which tries to connect there so I decide what to do next.
The problem is original code from the repo which looked like typical JavaScript code is not present in the same form in the "build" folder. Instead it's present as a bunch of eval() statements in background.js file.
The original code would contain something like:
this.attachRecorderRequestHandler = this.attachRecorderRequestHandler.bind(
this
)
and I search for this code and I find this line in background.js instead... It starts like this...
eval("__webpack_require__.r(__webpack_exports__);
and it looks like all the code it just put into one line and somewhere in the middle it contains
this.attachRecorderRequestHandler=this.attachRecorderRequestHandler.bind(this);}
Even if I put a breakpoint onto eval and go back to
chrome://extensions/?id=someVeryLongLineHere
and reload the page then the breakpoint is not hit. Surely I cannot get anything debugged.
It looks like I'm doing something wrong because what I see doesn't match typical "hello world" debugging experience in the Chrome documentation.
How do I debug this? How do I get breakpoints working anywhere and actually debug the original code?
I've got a little sandbox project I've been playing around with for the last few weeks to learn the in's and out's of implementing a TestCafe runner.
I've managed to solve all my problems except one and at this point I've tried everything I can think of.
Reviewed the following similar questions:
How to close testcafe runner
How to get the testCafe exit code
But still my problem remains.
I've toyed around with my argv.json file.
I've toyed around with my CICDtestBranches.json file.
I've toyed around with my package.json file.
I've tested the same branch that has the problem on multiple
machines.
I've tested with multiple browsers (Firefox & Chrome) -
both produce the same problem.
I've tried to re-arrange the code, see
below
I've tried add multiple tests in a fixture and added a page
navigation to each one.
I've tried to remove code that is processing
irrelevant options like video logs & concurrency (parallel execution)
I also talked with some coworkers around the office who have done similar projects and asked them what they did to fix the problem. I tried their recommendations, and even re-arranging things according to what they tried and still no joy.
I've read through the TestCafe documentation on how to implement a test runner several times and still I haven't been able to find any specific information about how to solve a problem with the browser not closing at the end of the test/fixture/script run.
I did find a few bugs that describe similar behavior, but all of those bugs have been fixed and the remaining bugs are specific to either Firefox or Safari. In my case the problem is with both Chrome & Firefox. I am running TestCafe 1.4.2. I don't want to file a bug with TestCafe unless it really is a confirmed bug and there is nothing else that can be done to solve it.
So I know others have had this same problem since my coworker said he faced the same problem with his implementation.
Since I know I am out of options at this point, I'm posting the question here in the hopes that someone will have a solution. Thank you for taking the time to look over my problem.
When executing the below code, after the return returnData; is executed, the .then statement is never executed so the TestCafe command and browser window are never terminated.
FYI the following code is CommonJS implemented with pure NodeJS NOT ES6 since this is the code that starts TestCafe (app.js) and not the script code.
...**Boiler Plate testcafe.createRunner() Code**...
console.log('Starting test');
var returnData = tcRunner.run(runOptions);
console.log('Done running tests');
return returnData;
})
.then(failed => {
console.log(`Test finished with ${failed} failures`);
exitCode = failed;
if (argv.upload) return upload(jsonReporterName);
else return 0;
testcafe.close();
process.exit(exitCode);
})
.then(() => {
console.log('Killing TestCafe');
testcafe.close();
process.exit(exitCode);
});
I've tried to swap around the two final .then statements to try and see if having one before the other will cause it to close. I copied the testcafe.close() and process.exit() and put them after the if-else statement in the then-failed block, although I know they might-should not get called because of the if-else return statements just before that.
I've tried moving those close and exit statements before the if-else returns just to see if that might solve it.
I know there are a lot of other factors that could play into this scenario, like I said I played around with the runOptions:
const runOptions = {
// Testcafe run options, see: https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/runner.html#run
skipJSErrors: true,
quarantineMode: true,
selectorTimeout: 50000,
assertionTimeout: 7000,
speed: 0.01
};
Best way I can say to access this problem and project and all of the code would be to clone the git lab repo:
> git clone "https://github.com/SethEden/CAFfeinated.git"
Then checkout the branch that I have been working this problem with: master
You will need to create an environment variable on your system to tell the framework what sub-path it should work with for the test site configuration system.
CAFFEINATED_TEST_SITE_NAME value: SethEden
You'll need to do a few other commands:
> npm install
> npm link
Then execute the command to run all the tests (just 1 for now)
> CAFfeinated
The output should look something like this:
$ CAFfeinated
Starting test
Done running tests
Running tests in:
- Chrome 76.0.3809 / Windows 10.0.0
LodPage
Got into the setup Test
Got to the end of the test1, see if it gets here and then the test is still running?
√ LodPage
At this point the browser will still be spinning, and the command line is still busy. You can see from the console output above that the "Done running tests" console log has been output and the test/fixture should be done since the "Got to the end of the test1,..." console log has also been executed, that is run as part of the test.after(...). So the next thing to execute should be in the app.js with the .then(()) call.....but it's not. What gives? Any ideas?
I'm looking for what specifically will solve this problem, not just so that I can solve it, but so others don't run into the same pitfall in the future. There must be some magic sauce that I am missing that is probably very obvious to others, but not so obvious to me or others who are relatively new to JavaScript & NodeJS & ES6 & TestCafe.
The problem occurs because you specified the wrong value for the runner.src() method.
The cause of the issue is in your custom reporter. I removed your reporter and now it works correctly. Please try this approach and recheck your reporter.
I have the following configuration setup in WebStorm:
When I click debug, it launches Chrome fine and navigates to the page, but my breakpoints never get hit. It's connected somehow though because I see all of the console.log() output in WebStorm.
I'm trying to navigate to the URL specified in the screenshot and have breakpoints in main.js get hit, but it doesn't work as expected (see: at all). I'm not exactly sure what I'm missing. I've tried setting a remote URL for the specific main.js file in the Remote URLs section, but that didn't help either.
For reference I run the application via bra run and npm run watch.
Quick Update
So I've been able to actually get a breakpoint to hit, but it's in a different file (in a different path):
../public/app/core/routes/dashboard_loaders.ts allows me to stop at breakpoints, but ../public/dashboards doesn't.
When I navigate to http://localhost:3000/dashboard/script/main.js?orgId=1, it hits the route:
.when('/dashboard/:type/:slug', {
templateUrl: 'public/app/partials/dashboard.html',
controller : 'LoadDashboardCtrl',
reloadOnSearch: false,
pageClass: 'page-dashboard',
})
Which ultimately does load the file ../public/dashboards/multi.js -- but no breakpoints are hit.
Further Updates
It looks like the script is served via the following command (in ../public/app/features/dashboard/dashboardLoaderSrv.js):
/*jshint -W054 */
var script_func = new Function('ARGS','kbn','dateMath','_','moment','window','document','$','jQuery', 'services', result.data);
var script_result = script_func($routeParams, kbn, dateMath, _ , moment, window, document, $, $, services);
Where $routeParams are type:script and slug:main.js - If I step into this function, I get an anonymous(?) file that's identical to my actual main.js file, but the name is like 43550 instead of main.js -- I think this is boiling down to a fundamental lack of knowledge in how JavaScript handles something on my part. :)
Edit: I found this issue for using webstorm with grafana (second edit) looks like this is you.
I think what he linked solves it with declaring a sourceUrl then your file isn't "anonymous" or rather dynamic.
//# sourceURL=filename.js
I.E
//# sourceURL=main.js
Reference How to debug dynamically loaded JavaScript (with jQuery) in the browser's debugger itself?
Here is the documentation and video on debugging in webstorm to make sure everything is setup properly. (I.E My default setting were to debug my index file instead of my project). Make sure you have their Chrome extension or Firefox Extension
General JS Debugging in Webstorm
Debugging for Chrome in Webstorm
Debugging for Firefox in Webstorm
Debugging Node.JS in Webstorm
I have this angular website which for some reason cannot be debugged when everything is concat together (not minified). Fo example, if I try to set a breakpoint, the breakpoint is placed somewhere else (at the bottom of an other file) :(
So, to overcome this I would like to set a breakpoint using the browser console (if possible of course).
In my current situation I need to set a breakpoint inside a service method. So I figured, I need the reference holding that service. But where does angular keep those. For example, I tried this
$> var myApp = angular.module('myApp');
$> debug(myApp.injector('someSevice').someMethod);
If this would work, I would expect the debugger to kick in when someMethod is called.
Here is an other failed attempt:
$> myApp.run((someService) => { debug(someService.someMethod)});
Any help on how to do this would be appreciated?
UPDATE: Find a way to access a service
$> angular.injector(['myApp']).get('someService').someMethod
However, in my case, this function is called initially only
If you're trying to debug a live production app, there might be a chance where the debug info is disabled for the website which is actually done to increase performance of the website. So use angular.reloadWithDebugInfo(); in console and then try to debug.
Reference:
Using the new code snippets feature in google chrome
I am using the code snippets in google chrome, so say I have a snippet file.
check_consistency.js
Is there an api or a global object through which we can run the snippet directly from the command line, something like:
window.runSnippet('check_consistency.js')
or maybe call methods defined in the snippet directly.
Workflow Tip 1
I also want to see this functionality added. Meanwhile, perhaps try opening the Sources where (as you know) you can select a snippet and right click it to run it. You may or may not know that you can tap Esc on this page in order to show the console at the same time as your snippets:
Workflow Tip 2
The snippets documentation also mentions
The ability to quickly locate a specific file can be essential to a developer's workflow. The DevTools allow you to search across all script, stylesheet and snippet files using the following shortcuts:
Ctrl + O (Windows, Linux)
Cmd + O (Mac OSX)
which will work regardless of the panel you are currently in.
...and...
A keyboard shortcut is also available for easily executing a snippet - just select your snippet then use Ctrl/Cmd + Enter to run it. This replicates the behavior of the Run (>) button - currently in the Sources console, but which will be moving into the debugger control in the near future.
What this means is that while in the console you can press Ctrl/Cmd+O to quickly select your snippet, and then press Cmd/Control+Enter to run it.
I have a work around for when I'm running snippets a bunch of times on a site. I wrap my snippet code in a function and assign it to a global variable.
e.g.,
window.mySnippet = function (value) {
console.log(value.toUpperCase());
};
When I run this snippet I can now run
mySnippet('hello world');
-> "HELLO WORLD"
You still have to run the snippet once to load it into memory, but it's better than nothing.