I have problem with debugging js code written in js bin with chrome.
Everytime when i edit/click run with JS new source file is generated and old breakpoint are not being hit.
Do you have any solution for this problem?
Just use a debugger statement in your code. Even though jsbin will give you a warning and won't autorun, you can still click the run button (or press ⌃⏎) and your code will pause on the debugger statement.
You can also look on the Sources tab for an item called (no domain). The file inside it has your JS and you can set breakpoints.
It is under runner - JS Bin Output - (no domain) - leduzidigo.js
Related
I'm new to VS Code, and is following the official tutorial to learn how to debug. However, it just won't work. First, the UI looks different. It shows "RUN".
Compared to what the UI looks like in the video, which shows "DEBUG".
Also, I added a breakpoint and hit the green start button, it just never stops.
Here's the launch.json file:
What should I do to make the debugger work?
You need to run node in inspect mode.
In terminal / console, do:
node --inspect app.js
Event listener breakpoints in Google Chrome Devtools offers various number of options, but for me, they are not really of great use since they always throw me to some irrelevant part of code.
What I would like to know is if it is possible to limit it to just one class? For example onMouseClick send me to the 1st method that executes after mouse click, inside specific class. If none of the methods are fired inside this class, than simply do nothing.
You can set the breakpoints for each script and each line individually.
First open the debug-tools and chose a script in the sources-tab:
Then you can click on the line-number (here only no. 1) and it looks like this:
As you see now is the line marked, but also in the right col your individual breakpoint is listed.
After having marked the breakpoint you still have to reload the page that the scripts are executed again till to the breakpoint. Afterwards you can use the icons above the right col to step in or step over the commands following the breakpoint.
Having minified scripts, breakpoints are hard to use, so it's better to have a script where each line has only one command, it's much easier then to debug.
So for debugging you should change the corresponding script in your page to the non-minified version, perhaps also with a map-file if available.
I am trying to run an automated test and one of the steps of a test case is to clear the Ace Editor and insert text in it.
Earlier I had regular content editable DIV and I was able to insert text in it but not anymore after switching to Ace Editor.
All I am doing is calling "clear" method on the element and then "sendText" on it.
I tried adding "click" method before clear to make sure Ace Editor does have the focus and it did bring the focus to Ace Editor but it still throws an error that element should be user-editable to clear it.
I also tried putting a sleep of 5s before clearing it just in case, Clearing is getting triggered before Ace makes the div contenteditable.
Here's the exact error to be precise.
Failed: invalid element state: Element must be user-editable in order to clear it.
Tricky question.
Since Ace Editor is not native browser element, i looked up on api that they are provide. Seems like you can use .selection.selectAll() and .removeLines()
If i would be you - i would try to call JS function, that selects everything, and calls .removeLines()
await browser.executeScript(`editor_reference.selection.selectAll(); editor_reference.removeLines()`) // variable will be diferent, depending how you connected editor object
http://www.protractortest.org/#/api?view=webdriver.WebDriver.prototype.executeScript
https://ace.c9.io/#nav=api&api=editor
You can see how it works right on their example page (https://ace.c9.io/) - execute this in browser console, editor should get cleared:
editor.selection.selectAll(); editor.removeLines()
send ctrl-a keys (cmd-a on mac) to select all before typing, so that clearing is not needed
I have no experience working with Ace editor before. I used demo ace editor from https://ace.c9.io/build/kitchen-sink.html to find a solution for the issue you are facing.
I tested the below piece of code in the demo Ace editor and it works fine.Not sure how the ace editor is implemented in your application.You can try it in your application and provide your thoughts.
browser.actions().mouseMove($(".ace_active-line")).click()
.sendKeys(protractor.Key.chord(protractor.Key.COMMAND, "a"))
.sendKeys(protractor.Key.BACK_SPACE)
.sendKeys("content in line1\ncontent in line2")
.perform()
If you are using windows machine then use protractor.Key.CONTROL instead of protractor.Key.COMMAND.
Hope this will work fine!
I created a javascript file in Plunker and I want to debug it. When I open 'Sources' panel, I don't see js file that I created. I only see plenty of Plunker js files. Please advice. Thanks
Another way is to put this in your javascript file
debugger;
and leave the console open, which will force the debugger to not only stop there but to also open the file.
You have two main options to drill down to the source file that you created.
1. Use the pop-up window mode of the preview panel
By default, the previewer runs inside an <iframe> inside the plunker webapp. You can ask plunker to show the previewer in a separate window by clicking the blue expand icon in the top right of the preview window. If you open dev tools for the pop-up window, you will only see your source files.
2. Right click the preview and hit inspect element
Doing it this way will let you use the embedded, live preview and will give you a shortcut to drill down to the DOM associated with your code.
The picture is worth thousand words...
F12 and then select sources; plunkerPreviewTarget has the source code
A quicker way I found is to simply grab the unique id of your plnk.
In normal 'edit' mode URL will be something like
http://plnkr.co/edit/P0fqZG6G6khKKrtfBkDP?p=preview
Simply append this id - P0fqZG6G6khKKrtfBkDP to the URL
http://run.plnkr.co/plunks/ therefore becoming
http://run.plnkr.co/plunks/P0fqZG6G6khKKrtfBkDP/
Important: Make double sure you add the trailing /
Open new URL in a new chrome window
Hit F12 in chrome, voila native angular JS debugging for your plnk
Note: You can then continue editing in plnkr, saving, and simply refreshing this URL when debugging, to maintain your active debugging session.
This may change, but currently on Chrome 47.0.2526.111 m on Windows 10, 64 bit, this is how you can find your plunk source files:
Open developer tools (F12)
Open sources
Look for run.plnkr.co
Expand this to show a single directory with a cryptic name
Inside, you will find your files so you can start debugging
Say I want to look at an object and so I log it to the console:
console.log(theNoticeObj);
Then using Chrome Dev Tools, I inspect it in the console and change its property theNoticeObj.bounceHeight to 10px
Now if I want to trigger theNoticeObj.bounce() on that object immediately to locate it, is there an easy way to do that from the console?
Thanks
EDIT:
Breakpoints where suggested below, but this freezes execution.
In face what I want is the command line API to work with javascript objects, not just DOM elements. If that were possible I'm sure I would be able to find it. I might go and see if there are any feature requests to that end for chrome.
https://developers.google.com/chrome-developer-tools/docs/console#using_the_command_line_api
Try adding window.tno = theNoticeObject under the console.log statement. Reload the page and see if you can execute tno.bounce() from the console. If theNoticeObject is still in scope, this should work.
You can navigate to the Sources tab and open your javascript file containing the piece of code you want to play with, in this case let us assume it is
console.log(theNoticeObj);
Once you find this line, you can set a breakpoint at this point and when your program execution comes to this line it will halt.
You can then use the Console tab to do operations on all the javascript objects in current local scope, window scope. You can simply call:
theNoticeObj.bounce();
It executes in the current context reflecting changes on the screen.
Hope this helps.
Now you can right click any object in the console and use "Store as global variable".
A new console line appears with the name of a new global variable holding reference to the selected object.