How can i display the console for debugging JavaScript on jsfiddle.net?
I only see a results tab. When trying to do a console.log('test'); only a white result tab appears.
Does a console panel exists at all?
Normally by pressing F12 or using inspect on your result pane.
Alternatively add
https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
to the resources on the left as seen here
for (var i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
console.log({
foo: 'bar',
baz: function() {}
});
console.log([1, 2, 3]);
console.log(window.alert);
throw new Error('This is error log..');
<script src="https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>
Old answer
Until recently if you wanted the "Stacksnippet Console" type of console, you could choose jQuery and turn on Firebug which would show console messages in the result pane:
-- Latest Simple JSFiddle Solution --
JSFiddle now has its own beta settings for displaying the console:
which appears at the bottom of the results panel:
You can open it by right clicking and selecting Inspect Element on that menu or you can use f12 as a shortcut key to open console.
You can use the package below to redirect console output in an 'inspection style' manner to the HTML pane.
GitHub: https://github.com/karimayachi/html-console-output
If you also have normal HTML output, you can use CSS to overlay this console or have it stick to the top or bottom.
Basic example (no CSS) here: https://jsfiddle.net/Brutac/e5nsp2mu/
To run it inside jsFiddle, simply add the CDN-version (url below) to the resources (see example).
https://unpkg.com/html-console-output
you can use browser console by
Rightclick > inspect element > console
F12, opens the debugger view and on console tab you get the logs. You can filter as required warning/info/errors/all
(Tested on Chrome)
1- Write some simple JS code on the JS pane. e.g.> console.log("hello");
2- Click on "Run".
3- On the "Result" pane, right click and pick "Inspect".
4- Go to the Console.
5- Make sure that you filter your results.(See picture down below).
And do NOT click on "Update" in order to keep a clean console. Every time you want to test new code, just hit "Run" or use shortcut: Ctrl + Enter.
Related
While debugging, I might have an element el, and I can print it out using console.log(el).
There can be 50 or even 100 of them, while debugging. Can I print out something in the debug console in Google Chrome, so that when I click on it, will make the element come into focus in the webpage?
I tried:
let tmpLink = document.createElement("a");
tmpLink.href = "#"; // now it is a link instead of anchor
tmpLink.innerHTML = "Click Me";
tmpLink.addEventListener("click", function() {
el.focus();
});
console.log(tmpLink);
and the link is printed out in the debug console, except when I click on it, doesn't bring me to the element on page. Is there a way to do it?
One less desirable way is to do
window.focusArr = window.focusArr || [];
window.focusArr.push(el);
console.log(`Element ${window.focusArr.length - 1}`);
so I can just do in the console:
focusArr[21].focus()
But is there a way to make clicking on something work in the debug console?
This isn't exactly what you're asking, but it may achieve the functionality you're looking for while debugging. In Chrome, if you log the actual element that you'd want to focus on, you can log an exact reference to the element, and then right click on it in the console and select "Scroll into view":
(For your code, you'd have to do console.log(el) so that the el that you're interested in can be right-clicked on and zoomed to)
Just log the element itself.
let e = document.getElementById('main');
console.log(e)
<div id="main">
Hello
</div>
You can then right click on the element in the log message and choose "Scroll into view"
For my project I need to copy image (not url, image name. Only data for ability, for example, to paste it to "Microsoft Paint") from page to clipboard by Chrome console.
I tried this:
copy(document.getElementById('someimage'));
but it returns nothing... It only works with text.
If you don't know, then how to download this image by chrome console?
OR
How to make screenshot of the page and copy or download it using Chrome console?
P.s. I can't use any js libraries.
I have explored few things in chrome dev tools
https://homeguides.sfgate.com/stop-air-flow-ceiling-air-diffuser-28867.html - This is the website I am using it for reference.
In Chrome console try the following command
imageurl= document.getElementsByTagName('img')[0].currentSrc;
copy (imageurl);
Note: Here you can change the img [1] array if you want to get different images
Then if you press ctrl + v in your keyboard you could see the image url with https. Please see the above screenshot.
You can perform the ctrl+ v on your new tab to get the image loaded.
or You can try the following method.
Right click the image and click inspect element
You could see some image url. Copy that URL
Open new Tab and paste the URL
If you right click on it you can see "Save Images" option.
Hope it will help you in someway.
As you mentioned you are using Selenium, here's how to save an image with Selenium:
You need to get the image's URL, load it (using ImageIO in this example) and save it. For example, in Java you would do something like this:
try {
driver = new ChromeDriver();
driver.get("http://...");
WebElement img = driver.findElement(By.cssSelector("#selector"));
BufferedImage buffer = ImageIO.read(new URL(img.getAttribute("src")));
ImageIO.write(buffer, "png", new File("image.png"));
} catch (Exception e) {
e.printStackTrace();
} finally {
driver.close();
}
If you want to copy it directly, your class needs to implement java.awt.datatransfer.ClipboardOwner and then you would do something like this:
try {
driver = new ChromeDriver();
driver.get("http://...");
WebElement img = driver.findElement(By.cssSelector("#selector"));
TransferableImage transferable = new TransferableImage(ImageIO.read(new URL(img.getAttribute("src"))));
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(transferable, this );
} catch (Exception e) {
e.printStackTrace();
} finally {
driver.close();
}
Regarding your other questions, here's how to take a screenshot using Chrome DevTools:
There are 3 Capture... commands in Chrome DevTools. Just follow these steps to get to them:
Open DevTools.
Go to the Elements tab and click on the element you want to take the screenshot of.
Press Cmd + P on Mac or Ctrl + P on Windows.
Type > screen. You will get 3 relevant suggestions:
Mobile Capture full size screenshot: Captures the whole page, including the non-visible (out of viewport) area.
Mobile Capture node screenshot: Captures a single node, in this case, the element you clicked in the second step.
Mobile Capture screenshot: Captures the visible area of the page (viewport).
Click on any of them and the screenshot will download automatically.
However, keep in mind this feature doesn't always work fine, especially the Capture node screenshot one, so it might be better to capture the visible area of the page and crop the afterwards.
I am doing:
driver = new webdriver.Builder()
.forBrowser('safari')
.build();
var referrer = 'http://localhost:3000/tours/hood-river';
// console.log(referrer);
driver.get(referrer);
driver.findElement(By.id('requestGroupRate')).click();
//requestGroupRate is a link, so clicking it should move it to a new page
driver.wait(function(){
return driver.findElement(By.id('myThing')).then(function(element){
console.log("hereere");
assert(element.value === referrer);
done();
});
},10000);
I find that the findElement(By.id('myThing')), fails, even though the page it should be on clearly has 'myThing'. But if I change the line to
driver.findElement(By.id('requestGroupRate'))..
Then the element is found! This leads me to believe, that the click() does not cause the driver to navigate to the link.
EDIT: The link I am trying to click on:
<a id="requestGroupRate"
href="/tours/request-group-rate">Request Group Rate.</a>
you can simply add driver.sleep(10000) after click() for debug purpose.
if the page changed, means the link and click() worked and the possible failed reason it's when script click on the link, the page is still loading, so browser failed to response to the click event.
then you can move the driver.sleep(10000) after browser.get() to see click() can work or not.
As suggested by acdcjunior findout if element is clickable use browser developer tools. Chrome it is a side panel, Firefox it is a marker at the end of the HTML tag.
I have had issues getting Selenium to click on a GIS map. In that case i use an alternative (will need to translate this Java into Javascript):
((JavascriptExecutor) driver).executeScript("document.getElementById('map_container').dispatchEvent(new Event('click'));");
Also suggest testing your xpath in the browser developer console:
document.evaluate(".//tagName[#id='Query']", document,null, XPathResult.ANY_TYPE, null).iterateNext();
Or testing your cssSelector in the browser developer console:
document.querySelector('#idtext')
Assuming I have following HTML
<div id="box" style="display:none;">Hello World</div>
<button id="showbutton">Show The Box</button>
And following JQuery button handler to show the div
$('#showbutton').click(function() {
console.log('test');
$('#box').show();
});
Notice the console.log statement. If I click the button on a freshly opened IE9 browser, it won't work. It seems the console object is not yet initialized. But if I press F12 to open the developer console, the handler will work.
This behavior doesn't exist on Chrome/Firefox.
Is this an expected behavior of console object on IE? Is there a documentation related to javascript console object support on IE?
JSFiddle for the demo is here: http://jsfiddle.net/6tHB5/.
To reproduce the problem on IE, you have to close your browser first, run the browser again, then click the button straight away without opening developer console (F12)
Yes, this is unfortunately just how IE works. There are a few possible solutions:
You can check beforehand if you want to avoid JS errors.
$('#showbutton').click(function() {
if (console) console.log('test');
$('#box').show();
});
Make your own log function to check automatically.
function log(){
if (console) console.log.apply(console, arguments);
}
You could also mock out the console like this at the top of your page to make life easier:
if (!window.console) window.console = {log: function(){}};
In IE 9 console object is not defined before it opened, so you should check it before log:
$('#showbutton').click(function() {
if (typeof console != 'undefined') console.log('test');
$('#box').show();
});
I have a web app built using ExtJS framework.
I have a tree in my west panel, and in the center panel a TabPanel. When I click on any of the nodes on the tree in the west panel it attempts to add a form on to the center TabPanel, the following code is called:
var center = Ext.getCmp("center-panel");
var existingpanel = center.get(panelId);
if (existingpanel) {
center.setActiveTab(existingpanel);
} else {
var activeTab = center.getActiveTab();
if (!openNew && activeTab) {
var removed = center.remove(activeTab, true);
}
center.add(c);
center.setActiveTab(panelId);
center.doLayout();
}
This retrieves the current component, and then checks to see if the tab we are attempting to load exists, if it does exist then it just activates that tab, otherwise it will attempt to add a new one.
The OpenNew s just a flag that is passed in to state whether it should be opened in a new tab (for example if the user ctrl+clicks the node on tree).
Without using the OpenNew functionality (e.g. with just one tab) the form works correctly, and I can navigate between nodes with the tabs being removed/re-added correctly.
However, if I ctrl+click a node to open a second tab, the tab opens at first, so there are two tabs, but then when I select another node (so this should just remove the recently added second tab and replace it with a new tab for the new node) it just closes the second tab but fails to add the new tab.
I can't see any reason behind it as it is fien adding/removing the tabs when there is just the single tab.
There is an error in FireBug, but it doesn't offer much help:
uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOM3Node.compareDocumentPosition]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: /ext/ext-3.1.1/adapter/ext/ext-base-debug.js?d=1066331810 :: <TOP_LEVEL> :: line 1900" data: no]
-----------UPDATE:--------------
it seems to correlate to doLayout() call - if I put a doLayout() call directly after the remove() call, then it doesnt get as fat as the add() call, and if I put it after the .add() call then it half loads the new tab but stops before completing.
If I have a doLayout() call after both, then it works a little better, and I can then have two functioning tabs, but when I tried to add the third tab it displays the same behaviour as above, and closes the third tab and doesnt repopen a new one..
I have now resolved this issue - the problem was to do with the formPanels I was actually adding, whilst all the panels themselves had unique IDs I had not thought to check the IDs of other components within the form (as Jad suggests in his comments), and the forms had "FieldSets" defined with static IDs, removing those resolved the problems.
I also tested the problem in Chrome using the developer tools and found the stack trace provided a lot more useful than the error provided by FireBug, so I will be using both from now on!