Get browser console to show filename + line number in javascript file - javascript

a tricky question to word. I'm new to React and have been debugging my code using console logs in Firefox.
However, at times the Firefox console window stops showing the filename and line number of the console log and displays a different format. I can click on it to inspect it in Firefox's debugger but I'd prefer to change it to the standard filename:line number view. Anyone know how to do this?
I'd prefer to keep it like this:
And not like this:

Still unsure as to why this happens - but the quick solution is to restart npm via command line. Browser's command line then resumes the form of the first image above.
npm start

Related

Add a console.log or equivalent from within the browser

In e.g., Chrome Dev tools, it is easy to set a breakpoint in the Javascript for a website. When you are stopped at a breakpoint, it is easy to log out the value of any variable in the scope of the breakpoint, and you can even use watch expressions to have this done automatically.
However, what I would like to do is add console logging to a script from within the browser, so that I can see values without stopping execution of the script in a breakpoint.
My use case is that when developing, I will often use console logs for debugging. I may add a console log, compile, start my dev server, navigate to the place in the app where the code is executed, and observe the log. However, for my team's workflow, it would be useful to be able to add additional logs without having to recompile etc. Is there a way to do this in Chrome?
Starting at Chrome 73, you can use Logpoints, which are basically non-breaking breakpoints which only do logging for you.
Before Logpoints was a thing - you could set a conditional breakpoint in devtools and just write console.log(someVar) inside the conditional statement, and it would work since console.log doesn't return anything, and hence not stopping at the desired breakpoint.
Adding a console log is something Google recently add.
In the selected row instead of left click,click right click and select 'add logpoint', a small text box will pop up, enter the variable you want you console log.
If you do not see this feature update your browser.

Cannot execute Javascript from Chrome console

In the past it has been possible to write JS in the Chrome console (and is still possible on Firefox). However for the last month or so this hasn't worked, anything I type in there is silently accepted with no obvious impact, functions I call are clearly not run, etc. See this screenshot where even a direct console.log() fails to produce output:
I can't find any documentation indicating the feature was removed nor can I find any obvious causes for why this isn't working anymore. This is happening in Chrome 52.
Step 1:
The little icon next to the no smoking looking sign that looks like a half of an hour glass (see image), click on it. This is the filter settings.
Step 2:
It will give you this option:
Click on the logs or all tab to show console logs.

Why did IE JavaScript breakpoints stop working from Visual Studio 2013?

Until two weeks ago I was able to set a breakpoint in JavaScript code by adding a debugger; statement. For Internet Explorer, when this statement was hit, this would cause me to automatically go back to the Visual Studio debugger.
I could optionally toggle a breakpoint for the line in Visual Studio, but this wasn't necessary, and it wouldn't set a breakpoint on its own without the debugger; statement. When a breakpoint was set in this way, it would show a red filled in circle on the line of JavaScript code.
On April 4th this stopped working.
Now if I add a debugger; statement nothing happens. If I try to toggle a breakpoint in Visual Studio, I get a red open circle. Hovering over the circle gives me the error that "The breakpoint will not currently be hit. No symbols have been loaded for this document."
I've searched for that error message, but what I have found has been about C#, not JavaScript.
I thought the problem might be something we did to our source code, so I checked out a much older version, but I still had the same problem. Our other developer started having the same problem on his main machine at the same time I did. But he has a laptop he uses less often that didn't see the problem. It was a bit behind our source control and he ran it forward one commit at a time until the present version and never saw the problem.
How do we get our breakpoints to work again? How do we get Visual Studio to load the JavaScript symbols? (or is that even really the problem?)
I've been relying on Firebug for two weeks, but I need to go back to IE because of the VS integration.
Stuff I've already looked at:
In Visual Studio, Tools -> Options -> Debugging -> Just-In-Time, Script is already checked.
In IE Tools -> Internet Options, Advanced tab, Browsing section, Disable script debugging is not checked, either for Internet Explorer or for Other.
In VS, Properties menu after right-clicking on the solution, Common Properties -> Startup project, selected Multiple startup projects, set start action on the project with our JS code. The result of this was my "Internet Explorer" button turned into a Start button that couldn't run the project - it just gave the error message "The debugger cannot continue running the process. Unable to start debugging."
Right click on the project, select Properties, go to Web -> Debuggers. The options I get are ASP.NET, Native Code, SQL Server, and Silverlight. Only ASP.NET is checked. Enabled all of the others, but nothing changed.
Cleaned and rebuilt the whole solution.
Project properties -> Build: Define DEBUG constant and Define TRACE constant are checked. On the Advanced dialog, Debug info is set to full. Not sure if that even has anything to do with JavaScript.
Debug -> Options and Settings -> Debugging -> General: uncheck Enable Just My Code
In the end after a lot of changes, I saw this error message "Ignored debugger statement in eval code at line 2600. To stop at this statement, disable Just My Code."
I had already tried the Just My Code fix, but I tried it again, and my breakpoints came back:
Debug -> Options and Settings -> Debugging -> General: uncheck Enable Just My Code
When breakpoints are triggered they show up in a special eval'ed code window that includes a copy of the code where I put the debugger statement. I think that's how it was working before. Apparently there are a few places in our code where breakpoints work no matter what - those didn't need this fix, and they don't show up in the special eval window.
I rolled back all the other changes I had made today one by one, and in the end it looks like disabling Just My Code fixes it. I had even messed with creating a _references.js because I was seeing an error from JavaScript Language Service about it, but that doesn't seem to be necessary.
Thank you to those who pitched in with suggestions, including those who posted answers and deleted them because you realized I'd already tried it. Obviously trying things more than once can sometimes be a good idea.

Prevent chrome console from processing javascript until I'm finished writing it

Is there a way I can set up javascripting in Chrome's console so that it does not process my statement as soon as I hit return. If I'm trying to test something out by just writing some javascript there, it processes before I'm done writing.
//here I am writing in the console
if ($(el).size() === 0){
//now I hit return because I want to type some stuff if this evaluates to true
//but return submits it as a finished piece of javascript and of course
//I get SyntaxError: Unexpected end of input before I can have a chance
//to finish the logic
I know I can hit shift+return and get a line break, and though that's a small inconvenience, it's still a bit of an inconvenience. Is there anyway I can tell it to hold off processing until I hit a macro like shift+return?
It's the same way in Firebug. Maybe there's an option there. Or maybe someone knows of a good third party add-on. Thanks.
In the comments I posted the ticket for the request for support, but it has been there for awhile. Chrome does have snipplets, but you have to enable them.
In the address bar type about:flags
Enable Developer Tools experiments
Restart the browser
Open the Developer Tools open the settings menu [gear on bottom right corner]
Click the Experiments tab [on left], check Snippets support
Restart the browser
In the Scripts panel, there will be a Snippets tab, click on it.
Right click on the area below and from context menu select New
You can than Edit and Run the code like a file. Run it with the context menu or play button.
A multi-line console effectively lets you do what you want. Chrome has a request for this but is otherwise not really available.
Firebug Lite for Chrome does allow it. Just click the little red button at the bottom-right of the Javascript console.

Pause after each line in javascript

I would like to have a program pause after each line is executed in javascript. This is for a teaching tool where the user will type in there js and be able to step though it line by line. I want to then be able to step through each line and pause after it is executed. Something line popping up an alert() between each line, but without the dialogue.
Is this possible?
I am looking to keep it in the browser and not use DevTools or Firebug.
Yes, you run your code through FireBug (which is a FireFox extension).
Get firefox here
Get firebug here

Categories

Resources