Right now I'm using a Chromebook that does not allow me to "inspect element" on a webpage.
I would like to be able to view the javascript console log from within Cloud9.
Cloud9 seems to be able to "preview" a webpage, but it doesn't seem to have the option to view the console log from that webpage.
I feel like I should be able to do this with the debugger, but it may be impossible.
A way to do this (or verification that it is impossible) would be appreciated.
Javascript console log is not possible in the "client" in Cloud9.
Inspecting a single element on Chromebook is possible.
If you want to highlight a single element, "right click" the element and select "Inspect element" from the menu.
Source: https://answers.yahoo.com/question/index?qid=20140314102249AA5VbJJ
Cloud9 debugger works for server side code, it doesn't allow to inspect pages in the browser.
Related
I'm making a Chrome Extension and need to view the HTML/CSS/JS of the popup.html.
I can't right click to inspect elements. Is there another way? I need to make sure CSS and JavaScript is being inserted correctly. How to debug a problem in that popup file?
Right click the extension's button, then 'Inspect Popup'
Inspect Popup has gone away with the latest build.
Here's how I debug Chrome Extension Popups.
Click your popup button to see the webpage (the popup window itself).
Right-click in the window and select Inspect element
The Chrome Debugger window comes up with the right context, but you've already missed your breakpoints and debugger statements.
HERE'S THE TRICK. Click on the Console part of the debugger and type: location.reload(true) and press enter.
Now your breakpoints are hit! Great way to reload changed scripts without revisiting the Extension page.
Perhaps another way may be to find the ID: for your application in chrome://chrome/extensions/
You can then load your popup in a regular window by
chrome-extension://id_of_your_application/popup.html
Exchange popup.html for the file you have specified in manifest.json under "default_popup" property.
Yes, 'Inspect Popup' on the extension icon, and apart from that - from extension manager you can also inspect your options page.
Try switching Auto-open DevTools for popups in the bottom right of DevTools Settings:
Another good way to inspect Javascript being part of the extension popup is adding special comments to the end of the script to be debugged:
// #sourceURL=popup.js
This is de-facto a directive for DevTools to include this specific file into Sources tab. From there you can inspect code, add breakpoints, output to console, etc. as usual.
How do I view all JS objects that I created in chrome? I know if I type window into the console, I will see everything, but where is the tab that is filled with all my things?
I think you might be looking for something like Chrome Breakpoints. Basically, in the developer tools, you will go to 'sources', click the file you are wanting to debug, and set a breakpoint on the line in the file that you want to see your active variables. You do this by simply clicking on the line number. When you reload, the browser will pause execution on this line and you will be able to see all the information you are looking for.
this JS alchemy game is what i want to copy, it s open source and has its code on github.
However, I want to see its code on webpage, right clicking when playing does not show context menu, I can not do "inspect source".
How do I inspect the actual html code?
CMD+ALT+I in chrome would open inspector.
how can I make code generated or changed by jQuery (JavaScript) visible? Showing the plain code in the browser (e.g. Firefox) only shows the elements before they were changed and manipulated by jQuery/JavaScript.
Are there tools (for Firefox?) where I can make the live code visible?
are you using Firebug? this will allow you to see the HTML after it has been manipulated
You could use firebug which does exactly what you need and much much more
In addition to using Firebug or some other plugin, in Firefox you can highlight the text, right click and select "Show source".
Use an object inspector so you can see the live DOM like Firebug or the built-in Chrome or Safari Inspectors. In any of those tools, you just right click on an object in the web page and select "Inspect Element" and a whole live DOM hierarchy opens up in a window for you to inspect what is really in the web page at this moment.
Here's what it looks like in Chrome when I right click on an object in a live StackOverflow page:
If you're displaying the initial code via a javascript function call, then just call that function again after the update.
I have a pop-up window in a web app that allows you to edit details of a job. You can also click a link to cancel/delete that job. But when I click that link right now after making some edits to it, nothing happens.
It behaves as if javascript was targeting it with "return: false;" so it does nothing. The URL is correct. How can I check if there is JS intercepting my click event, and where it's doing that? Can Console do that? I'm not sure how if so.
Thanks!
In firebug you can debug your javascript code with:
console.log('text and '+variables);
You can click the console tab in firebug and see values. you can add a console.log line within your click handler to see if it's even getting inside the handler.
chrome's developer tools will list all handlers registered for an event on an element. i don't know of any other tools that provide this info.
Firebug is an invaluable tool for helping you debug javascript / coding javascript applications. I would suggest installing it to see what your error is etc.
Alternatively, Firefox has an Error Console, which you can view Javascript errors as well.