For example, when I'm debugging a website, I want to know where the JS code is located when the string "mywant" first appears during the runtime
such as , JS Code
line0: var a = "a"
line1: var b = "b"
line2: var c = a+b;
When the string "ab" appears, output the third line of code
You can check the lines of code in JS by putting "Console.log()" in your desired line of code.
Set breakpoints in the JS code in your browser's "Developer Tools" window. for example in Chrome hit "F12" button. Then in the "Sources tab" you can find your JS file. by selecting the file, file content appears in the right panel and you can put breakpoints and use the "step next" and "step over" options to check your code line by line.
Related
Is it possible to extract multiple resources' URLs in Sources or Network tab of Chrome Dev Tools?
When I want to get URL of a single resource, I can do it with context menu function Copy link address
I can switch to this resource from Network to Sources tab and vice versa, but what if I have a need to get URLs of multiple resources at once? It is very cumbersome to copy them manually if resultset consists of 200-300 resources.
What I've tried so far:
To copy the whole folder from a sources tab, but from this answer I found out it is not possible for now.
To use $(selector) as specified in the Console reference, in a form of
$('img')
in case we need to fetch image URLs.
The complexity of this approach is that it's often hard to distinguish target images on a page that has hundreds of them, and furthermore, multiple versions of the same image (views, previews, small-sized icons and etc.) I.e. to match the element inside the tag with the needed resource is not that easy, as it seems. Also not all the file types have dedicated tags (as in the case with img).
Maybe I should use src tag with some modifiers? Any other suggestions?
make sure Network panel is active
switch devtools Dock side in the menu to a detached (floating) window
Next time you can press CtrlShiftD to toggle docking.
in the now detached devtools press CtrlShifti or ⌘⌥i on MacOS,
which will open devtools-on-devtools in a new window
Run the following code in this new window:
copy(UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.map(n => n.request().url()).join('\n'))
It'll copy the URLs of all requests that match current filter to clipboard.
Hint: save the code as a Snippet and run it in devtools-on-devtools window via the commands palette, CtrlP or ⌘P then type the snippet's name.
In old Chrome the code was different:
copy(UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map(n => n._request._url).join('\n'))
copy(UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.map(n => n.request().urlInternal).join('\n'))
I found the above method too clunky, its way easier to use fiddler:
open fiddler (possibly install it)
filter on the domain name that you are interested in
clear the screen
refresh the web page
Select the fiddler output
right click and select copy just the URL's
Based on #wOxxOm, this worked for me:
var nodes = UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes,
urls = [];
nodes.forEach(function() {
var req = arguments[0]._request;
if (req !== undefined) {
urls.push(req.url());
}
});
A selection and simple copy (Ctrl+C) work for me.
I select URLs in the Url column by the mouse.
Then I use the context menu to copy the list to the clipboard.
The clipboard contents then I can paste to Excel and get the URL list. It adds some empty lines though.
It's been from version 0.47 that my breakpoints in chrome developer tool, would technically stops at the right line but it's shown otherwise on the source code panel.
there would always be a 1 or 2 line shift between the actual breakpoint and the blue colored selected line. that makes it very difficult to debug as it's never shown right, does anyone heard of a solution?
if(true){
this.anyfunction();
debugger;
var toto = 10;
toto ++;
}
In this example the first selected blue line in source code would be toto++, while toto would be undefined if you'd add a watch on toto, that's why I assume the breakpoint is properly hit, but there's a display problem...
I have faced same problem, It's working fine after I change inspect tools settings in chrome..
Click three dot icon in right top corner of inspect tool and select Settings.
(or)
Click F1.
Uncheck the Enable JavaScript source maps checkbox under the Sources in Preferences.
Now it's working fine...
Is your expression spread across multiples lines? For example:
var x = 1 +
2 +
3 +
4 +
5;
This is known to cause wonky behavior. When I set the breakpoint on the 1st line and then run the script, DevTools pauses on the 4th line.
Solution: set the breakpoint on the line above the expression.
in "chrome developer tools"
in "source" tab
look for 'cr' text in RED
color!
if you find anything it's mean there is some ENTER at the end of some lines that is not compatilble with you current EOF setting.
replace 'cr' with ENTER and you should good to go
EOF: End-Of-Line
Unchecking the Enable JavaScript source maps
Is there any tool to record the change of DOM by Javascript and then re-run it slowly to debug ? Basically I want to log the html source code every second and then go through them one by one to see how the javascript is changing the page.
There is huge javascript which is difficult for me to understand. It is minified. I am only interested in watching how that script changes the state of a particular node in DOM. The changes are very fast and I want to observe it slowly.
Update:
I can add break point to pause execution of javascript whenever a dom element changes. But as I have said the element is changed too frequently. It there is something like "pause execution of JS when the number changes % 100 == 0" it would serve the requirement well
You can set breakpoints in the Chrome dev tools, which will pause all script execution on that page and give you time to examine everything.
To open the dev tools, press F12 or CtrlShiftI on Windows, or CmdOptI on Mac.
Go to the "Elements" tab, right-click on the element you want to observe, select "Break on...", and choose the events on which you want to pause.
Then let the script run, and a dark overlay should appear, saying "Paused in debugger".
If not selected automatically already, go to the "Sources" tab in the dev tools.
From there you can see the entire call stack, and see and modify all global and local variables and closures.
With F8 you can resume script execution (until the next breakpoint), and with F11 you can step forward into the next function.
Of course you can still use the console and the "Elements" tab while the page is paused.
If you need finer breakpoints, you can set a breakpoint in the source code, or replace a function in some object reference.
To set a breakpoint in the source, find your script in the "Sources" tab, prettify it via the {} button at the bottom left, and click a line number in the script. The line number should get a blue arrow after that.
To set a breakpoint by replacing a function, you'll need some object reference to work with.
Let's say we're working with jQuery, so we have a $ variable, which has a .ajax() method. We can inject a breakpoint there by doing the following:
var oldAjax = $.ajax;
$.ajax = function()
{
debugger;
return oldAjax.apply($, arguments);
};
If there is no object like $, to which you have access from the console, you can still use it, if you can set a breakpoint so that such an object will show up somewhere in the variable scope of one of the invoked functions.
From there you can right-click the value of the variable, select "Store as Global Variable" and then proceed with the method above, just using temp1 instead of $.
See the following fiddle: http://jsfiddle.net/R3VbC/4/
In the example fiddle, I run the parseHref function when the ace editor's value changes. This in turn passes a string to an anchor element which is used to normalise the url. You can also click the Parse href button to run this function directly.
var parseHref = function()
var anchorNodeHrefOriginal = urlParsingNode.href;
urlParsingNode.setAttribute("href", 'my-href')
var firstPassHref = urlParsingNode.href;
urlParsingNode.setAttribute("href", firstPassHref)
var finalHref = urlParsingNode.href;
$('#original-href').html(anchorNodeHrefOriginal);
$('#first-pass-href').html(firstPassHref);
$('#final-href').html(finalHref);
}
editor.getSession().on('change', parseHref)
This replicates the functionality used by angularJS to resolve url (see this). This is relevant as I am trying to embed the ace editor in an angular app.
To reproduce the issue I am experiencing, copy and paste some text (do not just type it!) into the editor. In chrome, the values of the text displayed at the bottom should all be something like http://fiddle.jshell.net/R3VbC/4/show/my-href. If you do the same thing in IE11, the values displayed are simply 'my-href'.
If run this parseHref function in any other way, such as typing into the editor or clicking the parse href button, you get the desired result (i.e. http://fiddle.jshell.net/R3VbC/4/show/my-href). It only seems to give the incorrect value if you copy and paste text into the editor.
This could also be worked around by executing the parseHref function from window.setTimeout (see http://jsfiddle.net/R3VbC/5/)
editor.getSession().on('change', function() {
window.setTimeout(parseHref);
})
So it appears that somehow the ace editor is preventing anchor tags from resolving correctly in IE11 during the change event. Why is this happening and can it be prevented?
This ie11 error which happens with textarea too http://jsfiddle.net/R3VbC/6/.
urlParsingNode.setAttribute("href", firstPassHref) doesn't work when called from paste event.
try
textarea.addEventListener("paste", function(){
parseHref()
})
// not very a useful code snippet, but without it
// this `extremely intelligent` site removes jsfiddle link:(
But more importantly you shouldn't do any slow operations, like accessing dom, from change event, use editor 'input' event which is fired with ~30ms timeout, or use your own longer timeout.
Short version: new tabs in Chrome prevent old tabs from being used, fixing that means that opened tabs with PDFs in them get reused before a human can examine the PDFs.
Long version:
Originally it worked like this:
open new Chrome window to main page of the app (tab #1)
2.[do process A and then] click the button and a new tab (tab #2) opens with PDF A in it.
Go back to tab #1 [do process B and then] click the button and a new tab (tab #3) opens with PDF B in it.
Go back to tab #1 [do process C and then] click the button and a new tab (tab #4) opens and Word document C document gets downloaded.
Go back to tab #1 [do process D and then] click the button and a new tab (tab #5) opens and Word document D document gets downloaded.
All tabs stay open and PDFs can be viewed. Not perfect, but workable.
But then things changed. I pulled frequently used stuff out, put them in methods in another file so all of the various tests could use them, which seemed like a good idea. But that seems to have caused problems with losing focus on the original window. (I may be wrong) now I'm stuck with:
open new Chrome window to main page of the app (tab #1)
[do process A and then] click the button and a new tab (tab #2) opens with PDF A in it.
Stay in tab #2 [do process B and then] click the button and a new tab (tab #3) opens with PDF B in it. PDF A is now lost
Stay in tab #3 [do process C and then] click the button and a new tab (tab #4) opens and Word document C document gets downloaded. PDF B is now lost
Stay in tab #4 [do process D and then] click the button and a new tab (tab #5) opens and Word document D document gets downloaded.
This was caused by using "b.windows.last.use"
So I tried using "b.windows.first.use"
But that fails, because focus isn't going back to tab #1, and watir can't find the object in the modal that it needs to click.
(in `assert_ok': Element is not clickable at point (737.5, -373) (Selenium::WebDriver::Error::UnknownError))
So far as I can tell, I would be fine if I could do any one of the following
get PDFs to download. I cannot. This page seemed promising, but the code didn't work and I couldn't fix it.
get watir to go back to the first page, "for realsies", and find the buttons it needs
perhaps open a new tab for every section of the test (I'm going to look into this one, but I'm not overly hopeful)
Any ideas?
I updated Watir and Ruby both within the last two months. I'm using Chrome on OSX. Moving to Windows or IE are not viable options.
Here is a section of the code. No, I'm not a programmer first and foremost.
Thanks.
currenturl = "stackoverflow.placeholder.com/works"
# print Inventory Report .PDF (document 1)
b.goto currenturl
b.div(:id, 'page').a(:text, 'Inventory Report').click
sleep 1
b.div(:id, 'printInventoryReportModal').a(:text, 'A4').click
b.link(:id => "submitBTNprint-inventory-report").fire_event "onclick"
# print General List .PDF (document 2)
b.goto [main page URL]
b.div(:id, 'page').a(:text, 'General List').click
sleep 1
b.div(:id, 'printGeneralInventoryListModal').a(:text, 'A4').click
b.link(:id => "submitBTNprint-general-list").fire_event "onclick"
# print General List .DOC (document 3)
b.goto [main page URL]
b.div(:id, 'page').a(:text, 'General List').click
sleep 1
b.div(:id, 'printGeneralInventoryListModal').a(:text, '.DOC').click
b.div(:id, 'printGeneralInventoryListModal').a(:text, 'A4').click
b.link(:id => "submitBTNprint-general-list").fire_event "onclick"
It seems mostly that the browser.window function is not working the way you expect, or you are not using it properly. Since your question currently contains very little in terms of examples of how you are trying to change windows (tabs) it's very difficult to tell what you might be doing wrong.
To start with I would use IRB to do some exploring and troubleshooting
Get into IRB, then use
require 'watir-webdriver'
b = Watir::Browser.new :chrome
Now manually navigate the browser window that opens and get it into the state where you have multiple tabs open
Now try something like this in IRB to see if you can get it to spit out window titles
b.windows.each {|window| puts window.title}
If the titles are different, then you should be able to use that to set which window you want to use. If they are not different you will need to look at other attributes to see if there is an easy way to identify which window you want. (or maybe just use :index)
Try below code,
sleep (2)
#browser.driver.switch_to.window(#browser.driver.window_handles[put_your_index])
#browser.window(:title,"Please put your title here").use do
end
#browser.button.when_present.click
when you want to want to switch back to your actual window, use the
same code as above and change the window index accordingly.
For an example, if parent window index is 0 and then child window index would be 1