Hook Chrome debugger up to text editor - javascript

Is there some way to get chrome to launch my text editor when I click on a stack trace link pointing to a file:// url?

If you have relatively many files, you could try the Eclipse-based project:
http://code.google.com/p/chromedevtools/
If you manage to set up source lookup, you will have debugger stepping over your working files and live editing.
Together with JSDT or Aptana installed this may be quite usable.
However you will get only JS debugger, DOM tree is not supported.

At the moment the only way to achieve this is to modify DevTools front-end code(it's HTML+JavaScript so it shouldn't be too hard) to customize link clicks handling. There is a WebKit feature request for this functionality: https://bugs.webkit.org/show_bug.cgi?id=51526

Related

Is it possible to view a webpage that is being edited in vscode.dev?

If we are using vscode in the browser to edit an html file or project, is there a way to view the page?
I think I know what you mean.
On my chromebook I use vscode.dev in one browser tab, and then just drag and drop the .html file in to an empty browser tab and it can run Vanilla JS, CSS3, and HTML without anything else.
Refresh after each save, or install a live server. You could also have VScode running node, or whatever, in the background and just edit in vscode.dev, but that seems a bit excessive.
(Before I was using Crostini to run VScode on my chromebook and it would sometimes become very slow, buggy, or keep flickering (gpu style), and I'd have to restart/kill crostini to fix it, so finding vscode.dev has really helped when I can't find time to get to my workstation.)
CodeSwing is an extension that works in vscode.dev that does this.
Description: Interactive coding playground for building web applications (aka swings).
Id: codespaces-contrib.codeswing
VS Marketplace Link:
https://marketplace.visualstudio.com/items?itemName=codespaces-Contrib.codeswing

Chrome not loading HTML file properly

I am learning to build a web application using a Lynda tutorial. They have provided a sample application, which in their tutorial looks like this when loaded into Safari:
but when I try to open the same html file it shows up like this: (the only browser option is chrome, because it says it is a Chrome HTML
I am very new to web development, and I am not sure what could be causing this problem. I already disabled my AdBlock. I am using Windows 10 but the tutorial is using a Mac.
Thank you!!
Looks like your Stylesheets aren't loading, make sure you have linked the right files in your head's link elements.
Make sure your stylesheets are linked correctly. Learn the difference between relative and absolute links.
Ad Block won't affect anything, and your OS wouldn't have this much of an impact on the site not loading correctly. Posting your code generally helps us out a ton! At the very least, would you mind posting your stylesheet links, so that we could help you get those right?
currently, I'm facing the same problem. here the quick solution, use Microsoft Visual Studio code editor and install a plugin called "Live Server".
what I'm facing is if I open Html file using "live server" it is working, if I directly opening in the browser it is not loading the CSS properly.

Can I debug Javascript from FlashDevelop?

I'm developing for a JS target in Haxe using FlashDevelop. I would like to be able from inside the IDE, in the same way I debug a Flash target, with the breakpoints, callstack, variable list, all showing up in the IDE.
I currently use source maps with Chrome, but some IDE's can tie into Chrome directly to enable the debugging to happen in the IDE directly.
Is this possible in Flash Develop?
As far as I know, it is not currently possible. But FlashDevelop is open source so you are free to add this functionality yourself.

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.

What's a simple way in Google Chrome to insert Javascript into sites?

I would like to be able to add custom snippets of javascript to any site that matches a regex. This is mostly because of sites that I use daily because of specialized content, but which have a poor design. I want to be able to do something like:
Visit site See that sidebar overwrites content
Whip out developer tools, find div id for sidebar
Edit a snippet of javascript which is executed on document.ready for this domain:
$('#sidebar-right').remove();
A bit of searching for user scripts tells me that I need to be writing a Chrome extension, which seems unfortunate and overkill. Is there not an easier way, or an extension which is nothing but a javascript editor that assigns snippets to domains? I'd really like to be able to edit in Chrome itself, or at least have a file that I can just leave open in MacVim all the time. An extension requires unloading/installing to update as far as I can tell.
If I just had one big javascript file, that would be fine. I'd just wrap my customizations in domain checks.
Bonus love if I can write in CoffeeScript.
The answer is to use the Tampermonkey chrome extension.
https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo
Why not dotjs http://defunkt.io/dotjs/ ? It's local, you can version it with git, you can easily take it to another computer...
Another alternative that neatly solves the problem is Custom JavaScript for websites. You just need to install the extension, which takes around 2 seconds, and then you can immediately start typing your custom JavaScript for the specified website.
The extension automatically recognizes the current website, so all you need to do is write your code and click on Save. You can also easily import jQuery or your external scripts for convenience.
Custom JavaScript for Websites 2 is an alternative to Custom JavaScript for Websites, with some bug fixes and sync scripts across devices feature.
Snippets are available directly in Chrome Devtools
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets
Witchcraft is another Google Chrome extension for loading custom Javascript and CSS, and it is supposedly for more avanced users. The older dotjs project repository lists Witchcraft as its successor.
What you're looking for is Greasemonkey. But wait, Greasemonkey is for Firefox only, right? Turns out, you can install Greasemonkey user-scripts as native Chrome add-ons. Just go to userscripts.org and hit the Install button on one of them, and Chrome will automatically convert it into a native add-on. Then, write your own and install it using Chrome.
Note: This only works in Chrome 4.0.

Categories