How do extensions like "React developer tools" work? - javascript

I am trying to build a chrome dev-tool which would help developers debug their code (javascript code in frontend). But since most developers use tools like webpack to build their javascript code into a single large file and the code that the browser gets doesn't look like what they've written at development time, I want to know if there is a way to access the code they've written. Is this the way how tools like react-devtools detect React app and provide external stuff based on that code? If yes, how so?

JS Sourcemaps might be handy if this is what you're trying to achieve.

Related

Chrome Debugger for JS file only

So. Dumb question.
I am using developer tools on chrome as essentially my IDE in the source tab. I have a JS file writing a program with no associated html/css files. Is there anyway for me to utilize the debugger for my JS file? Specifically I want to step into a function
In developer mode, select Sources tab, then navigate to your JS files in the left side. In the right panel, you can add a breakpoint to any line by pressing the line number which has a real js statement. Then you can run your application again to debug your js scripts.
The picture below is an example(Line 33 of assert.js is selected).
There are a number of different ways to debug/test your JS code, Chrome is only one of them.
QUOKKA
Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
Runkit notebook
RunKit notebooks completely remove the friction of trying new ideas. With one click you’ll have a sandboxed JavaScript environment where you can instantly switch node versions, use every npm module without having to wait to install it, and even visualize your results. No more configuration, just straight to coding.
Hopa
Hopa is a zero config JavaScript/TypeScript runner right in your terminal.
JSComplete playground
This is a playground for JavaScript and React. You can use it to test simple code or prototype ideas. It requires a modern browser that understands ES2015 (ES6).
VSCode extensions Javascript REPL
Javascript REPL is a javascript playground for Visual Studio Code with live feedback(logs or errors) as you type, besides your code, in a log explorer, or in an output channel. It supports Javascript, TypeScript, CoffeeScript and it can be used for development in Node.js projects or with front-end frameworks like React, Vue, Angular, Svelte etc.

Is there any way to inject code into a website via vscode

I found this question in stackoverflow, which is a bit similar but did not help me.
I would like to find some extension/plugin for vscode that would inject a JS and CSS code into a given URL.
For example, after setting a url in vscode, I create a js and when saving the file this script is injected into google chrome in the url mapped or in the tab that is open in chrome.
There is an extension to chrome that does just that: User JavaScript and CSS
This is non-trivial but definitely possible.
I sadly cannot provide you with all the necessary information as I am not sufficiently familiar with the way VSCode extensions function.
First of all, there is this project which you should take a look at. It's source code will have useful information.
Alternatively, and my personal recommendation, you should go with abusing the remote debugger which chrome provides. This project is a good example of how it can be used. It connects to the chrome remote debugger and exposes a REPL.
There is readily available documentation on how to use the remote debugger to execute arbitrary javascript.
The next part will be to make an actual extension which takes the above, ties it together and listens to a "on file save" event or something of the sort.

JavaScript standalone IDE without browser?

So I have been looking for an IDE that allows me to run JavaScript just like Eclipse/VS would allow me to write Java/C#. I want to write some code and see the output on the console (possibly within the IDE itself), without having to open the browser. I know you can run JS programs from command line using node file.js. But I'm trying to avoid having to do that every time. I want to press a run button and see the results on the console. Is there something already out there. Can I configure my IDE in certain way to achieve that? Thanks in advance.
Take a look at Atom https://atom.io/ for the editor with embedded console and excellent JavaScript support (actually it's a browser inside).
Try Visual Studio Code, it is open source and free.
https://code.visualstudio.com/docs/runtimes/nodejs
Try this:
Is there a javaScript engine where I can run my code without being forced to use a browser?
A lot of alternatives of command-line and engines to try js without the need of a browser.
You can debug browser js with any jetbrains IDE, however I find chrome to be much better for debugging browser code than the jetbrains plugin. You can easily debug node by editting your debug configurations in any jetbrains IDE. Just download the node plugin https://www.jetbrains.com/help/idea/2016.1/running-and-debugging-node-js.html

Web-based JavaScript Debugger

I have an idea for a project that has to do with helping people learn to program. One of the things I think would be cool would be to have a place on the site where you can edit JavaScript code in real time in your browser.
I know there are a number of web-based JavaScript editors, but I haven't been able to find out if there are any tools that let you debug JavaScript from your browser. I think being able to step through your code is a valuable learning experience for people who are new to programming. It seems like something along those lines should be possible, though.
I originally thought you could use something like Firebug Lite: http://getfirebug.com/firebuglite, but they don't support debugging. Is this just too hard of a problem to solve in JavaScript?
I suggest you try Cloud9. It is a full-featured web based IDE for Javascript, which includes a great debugger. It is free for open source projects, which I imagine would include most learning purposes.
Why not just use the build in Javascript console from the browser? Every modern browser has this feature.

Javascript, Firebug: How do I have multiple views or what is the right of way of doing development?

Most of my javascript work is done with Firebug and I feel annoying most of the times having to switch between the HTML mode and console mode (which again I split into output mode and input mode). When I switch to a different page to see the HTML and come back, I lose the code that I write. What is the best way to go about developing javascript applications using firebug?
Something like a mini IDE would be awesome: It just has to let me insert some code, examine the current page and then let me execute it. Any suggestions?
I use a simple text editor (vim) to write Javascript and HTML, and I check the result every now and then in Firefox. I have always two windows open: one for my text editor, and one with the current page open in Firefox. After saving a change in the Javascript, I switch to the browser and refresh the page to observe results. That was my workflow until recently.
A couple of weeks ago, I discovered the Combiner tool by Nicholas C. Zakas. To release my Javascript code, I am now using a complete build process based on Apache Ant, similar to what I was using while doing Java development previously.
The first step is to check the Javascript code with the JSLint tool by Douglas Crockford. I used to painfully copy and paste my Javascript code in the online version of the tool, once in a while; being able to run it on all my Javascript files at once with this Ant script is a huge convenience.
The second step is to combine all my Javascript files into a single file using the Combiner tool. The third step is to minify the Javascript code using YUI Compressor by Yahoo!. These last two steps allow to optimize the delivery of Javascript code to reduce page loading.
You can find an example Ant build file that you may adapt to your own needs. I am currently using this file to build my own Javascript library, bezen.org.
The other answers so far have been correct: I've never heard of anyone actually developing inside Firefox/Firebug, because it's a tool designed for debugging, not coding. To do your coding, you should use a tool designed for it (either a text editor or a full-fledged IDE).
But that being said, you might want to check out FireEclipse (Link). It will allow you to integrate Firebug with the Eclipse IDE (which itself has at least three different JS plug-ins to choose from). Alternatively I think the main (aka Web Standard Toolkit, aka WST) JS editor for Eclipse has some functionality which is similar to Firebug, but I've never used it so I don't know the details.
Hope that helps.
Write your HTML in an editor/IDE
Save your changes
Preview it in your browser
Debug using Firebug
Make your code edits in your SOURCE CODE
Repeat
Firebug is for debugging and allows you to do some "what if" fiddling while the page is live. This is not a replacement for an IDE.

Categories