Where is the Javascript Console/window? - javascript

I'm looking for "Javascript Console/window" where code is evaluated and printed back within VSCode and can't find it. My Udemy Prof just starts testing on it. I'm wondering if it's an extension I need to download, or if I'm just overlooking it? Is Console only found in older versions of VSC?

Browser side JavaScript, the JavaScript that is used to edit html documents, does not run on a console app/window. It runs on a browser. Nodejs, On the other hand, runs inside of a console app. Since you are using JavaScript with Html, I will explain how you can view the results of your code that way. If you haven't already, make sure all of your files are in one folder. Open the folder. Right click on the Html file (in your case index.html), and go to open with. You should see an option that says open with Google Chrome (or whatever browser you choose to use). If you are using Google Chrome, it will have an inspect element option. Inspect element has useful development tools such as a console, a network tracker, and sources. The console will tell you the errors that you need to know.

Related

Can a browser's dev console continue executing JavaSript after a new page loads?

I'm trying to automate some online work through JavaScript and the Firefox (or Chrome) dev console. The work is mostly inputting the same (or similar) data on the same exact pages for many many people.
Example:
unique id
date 1 and 2
some more numbers
I wrote a very simple script that runs in the console and enters the data just fine.
The Problem
My script stops execution whenever it requires the page to reload or it loads another page. I cannot find any information on how to continue executing a script after a page has loaded.
My Limitations
I'm basically limited to what's on FireFox, Chrome, or Edge. Unfortunately, I cannot download any programs or tools that would make the automation any easier right now. Otherwise, I would just use Selenium and Python.
What I've Tried
First I tried to use the script that I describe above (simple DOM manipulation)
Then I tried to use the Selenium browser add-on, but I had to enter a starting URL for it to run. Selenium was not able to get past the login page of our system which is the only static URL that I can use as a starting point.
I then tried to use the Firefox Browser Console (different from the dev console) because the documentation seemed to suggest that I can use JavaScript on the entire browser (not just one tab). Unfortunately, I cannot find any helpful information on how to use the browser console for DOM manipulation. Everything that I search for points to how you create a browser extension, add-on, or how to use JavaScript on your own website.
What I Want To Do
I want to create a script that runs in a dev console. The script should take all of the data either from a separate page or an array then enter the data on each page for each person. I'll also have it prompt the user to verify the data before submission.
What I'm Looking For
What I'm hoping to get from this question is at least one three things.
An answer to the question's title.
Being directed to documentation or some other solution that can solve any of the above problems.
Being told if this is impossible and why by those who have more experience than me (I don't understand if the problem is just a lack of knowledge or limitations on the tools themselves.)
I think you can create a chrome extension and put your code in the background service worker. or use workers read this link

The breakpoint will not currently be hit. No symbols have been loaded

I am struggling with breakPoint issue in VS 2012 for more than hours. I am from eclipse background, there I never heard about such issues.
Problem :
The breakpoint will not currently be hit. No symbols have been loaded
for this document.
I have placed the break point in click action of Jquery.
I found the issue using the IE script debugging., The file loaded was old file., i.e I have modified a lot, but I can see no changes in the one which is loaded in IE. How to fix the bug
What I have Tried :
I know this question is duplicate, but being a newbie to VS and C#., I could not understand the older answers. For example, in this answer, he told to choose Debug -> Windows -> Modules. But I doesn't have Modules under windows in VS 2012. Also even though I read, I could not understand the explanation.
Also I am quite new to term Assemblies and PDB. Though, I located PDB files as he said. But how to open the .pdb file?
Need :
Could anyone explain me the same answer in easier term (with more explanation).
I found this out by accident with my VS2012 and ASP.NET MVC, maybe it can help somebody. I noticed that breakpoints in javascript that's inline in the *.cshtml file like this won't get hit (note that this file is a cshtml file):
But breakpoints in external *.js files will get hit:
Try to add debugger; key word before $.getJSON
Also make sure if you use IE to un-check the disable script debugging
Internet Options> Advanced tab> Under Browsing.
As I think this issue is related to Javascript debugging not C#
This results for me:
In your web application make sure Silverlight and ASP.NET debugger are enabled.
How to get there?
=> Right click on the Web Application => Properties => Web tab. Under Debuggers section make sure Silverlight and ASP.NET are enabled.
Running Visual Studio 2013 or Visual Studio 2015 RC, I've found that to get a breakpoint to work in a .js file I need two things to be true:
I need to start Visual Studio by right-clicking the VS shortcut and select "Run as administrator". (If right-clicking on the Taskbar icon, select the application shortcut icon from the pop-up menu and right-click on that to get a context menu that includes "Run as administrator".)
I need to set Internet Explorer as the default browser that will be opened for the web debugging session. If I choose Chrome or Firefox, the breakpoint doesn't work for me.
After opening and closing VS, rebooting the PC with all with no chance, this workaround worked for me in VS 2012 ( Ver 11.0.50727.1 RTMREL ):
In Project Property Pages, under Start Options, in Debugger section, only ASP.NET was enabled. As soon as I enabled Native Code and SQL Server, that red circle with plus sign inside, enabled again.
No idea why this worked! No active connection in Server Explorer nor using any native code in the project!
I had the same problem. You can use VS2017 to debug JS code this way.
When you set VS to launch the browser (Chrome in my case), it opens a new Chrome window. I was trying to debug the specific code (different URL from the window that opened) in a new tab. So I had the 'The breakpoint will not currently be hit. Breakpoint set but not yet bound' in VS.
I found out that if I opened the new URL in the original tab it suddenly worked. Seems that VS is tied to that particular tab.
Hope this helps.
These are the particulars of my situation: VS 2017 - Mainly C# code with some embedded HTML/JS which I needed to debug, Chrome (Version 68.0.3440), Windows 10
As this is Javascript code, so you need to use a javascript debugger. Generally internet browsers come with a debugger/inspector menu, which allows you to inspect/debug your javascript easily. Such debuggers come with a lot of useful features such as HTTP request/response inspection, browser session/local storage, etc.
Actually there is "Modules" option, but it's enabled only when you are in debug mode.
You can just press Ctrl+D,M combination when you're in debug.
In few words, PDB is a file that contains all debug information about your assebmly, you can not debug an assembly without this file. Assembly is a file that contains precompiled code for exetuion via CLR.
Could you provide a bit more information about your problem. What kind of application you are trying to debug for example?
Also, if you have located you pdb files made EXACTLY for your assembly, you can load it by right-clicking your assembly in modules window and selecting Load Symbols From > Symbol Path
Try deleting all breakpoints and restarting debugging in Visual Studio.

Is there a js console emulator that provides access to the browsers 'real' javascript console?

Does anyone know of any console emulator (preferably made in javascript or jquery) that would allow me direct access to the browsers javascript console that would be found in the developers tools in chrome for example? I have been using jq-console but that only emulates a terminal, very useful so far. However it only emulates a terminal and doesn't provide access to the browsers js console. I need this so that users have a front-end web based access to the console without having to open the developer tools or something similar, so they have access to the variables and objects available in the browsers js console. I had thought of loading the data into the memory of the jq-console instance however i think this would be a cumbersome process and i don't really know how to go about doing it without the information being directly entered into the jq-console instance. any help or guidance would be greatly appreciated. thanks in advance!
direct access to the browsers javascript console
No. Not without opening the console manually, and also you cannot do much more than logging messages. Any emulator will not use the native console.
web-based front end console at CodeAcademy.com
Have you looked at their source code? You can write such one yourself, too. Or have a look at EloquentJavaScript's console script (using Mochi and Codemirror).
a browser console
…is not possible without only emulating it. However, you can use FirebugLite for that, which promises the same look-and-feel as the native Firebug. Also, Opera's Dragonfly is written in JS, and it is released as open source so you might adapt (parts of) it.

chrome debug missing script

I'm doing some debugging on my site that has multiple scripts running. When I debug in firefox using firebug, the specific script I'm working on, (basically a series of jQuery listeners), shows up, breakpoints work - awesome. When I debug in chrome though, the script shows up under resources, but not under scripts. I can't put in breakpoints! I'm not a big fan of firebug, and I would really prefer to use chrome's debugger.
I'm not 100% where the problem is. It could be chrome (that's where I'm leaning), but I am debugging the script, so it's nowhere near stable enough to rule out. (The functions in the listeners aren't breaking in firebug)
Q: How does chrome decide to put something in the scripts tab and thereby allow debugging? and does it ever get this wrong and exclude scripts that run?
DevTools may omit scripts that are fully collected at some moment of time. For example if you script does not have any function, it will be fully collected once it ran.
Could it be your case?
From what I understand, imported scripts are put in a separate script pane whereas scripts embedded in the webpage are displayed in the webpage pane (yourpage.html). You can still access the webpage pane for debugging most of the time. I haven't ever had anything like the problem you're describing though, so I may not understand your issue.

How to substitute a content of certain javascript reference with local script for debugging?

I need to debug jasvascript loaded by page. Loaded page are not locally placed.
Loaded js is packed. I want to substitute it with unpacked version.
Is there any tricks or browser options to make it?
It looks like Fiddler's AutoResponder tab will do this for you.
You say you want to replace the JS with the "unpacked" version--if you just want to insert line breaks so you can step through in a debugger, the Venkman debugger has a "Pretty Print" button which does that.
It sounds like you are asking for after the application is already deployed somewhere so this might not be as helpful.
If your application already goes through a regular build script or process for debug or at least for release then you could do it there. You could leave the Javascript files as the un-minified/optimized scripts and when building for debug it just copies them over, but for release it runs them through your minifier/optimizer first before copying them over.
I know that jQuery uses a Google Compiler to package the framework up, but there are other tools that just minify the code. Also it gives you a chance to run any kind of quality checking tools (such as JSLint) on your Javascript when you already have it as part of your build process.
Other then that the AutoResponder idea from above sounds promising.
You could use Charles Web Debugging Proxy to map the requested JS file to a local unpacked JS file (or any other location). It costs money, but you can use the trial for 30 minute periods.
Firebug is a really good Firefox extension that lets you manipulate the DOM and you can see the changes as they happen. This will let you insert <script> tags to the page.
Just Edit the <head> piece of html through Firebug and insert the <script src="http://site.com/unpacked.js"></script> somewhere in the page.

Categories