Evaluate live javascript edits in Chrome? - google-chrome-devtools

How do I tell the Chrome developer tools that I'm done live-editing a section of javascript, and want the result to be "evaluated"?
Editing the javascript on the fly is simple, I simply put the cursor somewhere in a script in the Scripts tab and start typing, but how do I finish the editing process?
I read here that "changes you apply to the code are expressed only at the time when execution passes through them", but even if I try editing a function when it's being called (i.e., when having a hit breakpoint inside it), I can't get my changes to be acknowledged. Edit: this whole, "execution passes through it" stuff seems false or out of date at best.
Editing javascript on the fly in the developer tools is demoed by Paul Irish in this video around 3:30, but I can't figure out how he goes from editing code, to having it actually be used by the browser.

Ctrl+S or "right-click > Save".
Make sure you haven't enabled pretty-print, as you can't live-edit code, then.

This is what you are looking for:
1.- Navigate to the Source tab and open the javascript file
2.- Edit the file, right-click it and a menu will appear: click Save and save it locally.
In order to view the diff or revert your changes, right-click and select the option Local Modifications... from the menu. You will see your changes diff with respect to the original file if you expand the timestamp shown.
More detailed info here: http://www.sitepoint.com/edit-source-files-in-chrome/

Go to sources, choose the file you want.
Click the pause button to pause debugging .
Modify the script adding a console.log or whatever you want, wherever you want
Save the file (cmd-s or ctrl-2)
Click the pause/resume button to resume execution
the modified code will be executed

Related

VSCode: I want to remove annoying info message bar

Is there any way to completely remove this message popup or move it to somewhere?
I already know why this message comes, but I do not want to disturb my activity with annoying info popup.
When it pops up it hides the document tab, so I have to close it every single time. (I do not want to know how to fix this particular error message, this screenshot is just an example.)
It's very annoying and I've searched around for a way to remove it, but the answers keep saying how to fix that particular error and not how to hide the popup itself.
Press ESC.
I agree that this is really annoying. VS Code is all about high-speed workflow and not having to interact with anything except your code via keyboard. Everything has key chords, e.g. CTRL-P and CTRL-SHIFT-P. So having to stop what I'm doing, go to the mouse, and dismiss this popup, whenever a background task feels like completing (and not even really then, because the popup actually appears some short time later) just so I can get visual confirmation of which file I'm currently coding in, to refocus my work after being distracted by the same popup, is really awkward. They are in a stupid location and don't even fade away after time like well-behaved toasts.
That said, I think that's really two parts; the distraction, and relatively high workflow cost to dismiss.
It helped me a lot to learn that it can be dismissed quickly and easily with the ESC key. The other half the problem I still haven't solved, but hope that helps you.
In the screenshot it shows trying to validate PHP.
In a VS Code window select File > Preferences > User Settings
An editor will open on the left called Default Settings and on the right with a file called settings.json
In the right side editor you can add settings that will override those found in the left-hand-side one.
Between the braces type:
// Whether php validation is enabled or not.
"php.validate.enable": false,
Then save the document.
VS Code will no longer attempt to validate PHP files.
You can override any of the defaults using this method.
You can use the same technique for each Workspace (or project folder) using File > Preferences > Workspace Settings
You can't disable the alert bar in general as VS Code needs to tell you things and doesn't (thankfully) use modal dialogs to communicate.
Go to File > preferences > settings
Then add this to your user settings
"editor.parameterHints": false
You may want to try adding the line
"extensions.ignoreRecommendations": true
to your VS Code settings file (which you can easily reach with the keystroke (CMD + ,) on a Mac OS X or macOS system.)
Solution: User Preferences > change "editor.parameterHints": true to "editor.parameterHints": false
This will at least remove the obstructive boxes that appear above the cursor.

debugging plunker in chrome developer tools

I created a javascript file in Plunker and I want to debug it. When I open 'Sources' panel, I don't see js file that I created. I only see plenty of Plunker js files. Please advice. Thanks
Another way is to put this in your javascript file
debugger;
and leave the console open, which will force the debugger to not only stop there but to also open the file.
You have two main options to drill down to the source file that you created.
1. Use the pop-up window mode of the preview panel
By default, the previewer runs inside an <iframe> inside the plunker webapp. You can ask plunker to show the previewer in a separate window by clicking the blue expand icon in the top right of the preview window. If you open dev tools for the pop-up window, you will only see your source files.
2. Right click the preview and hit inspect element
Doing it this way will let you use the embedded, live preview and will give you a shortcut to drill down to the DOM associated with your code.
The picture is worth thousand words...
F12 and then select sources; plunkerPreviewTarget has the source code
A quicker way I found is to simply grab the unique id of your plnk.
In normal 'edit' mode URL will be something like
http://plnkr.co/edit/P0fqZG6G6khKKrtfBkDP?p=preview
Simply append this id - P0fqZG6G6khKKrtfBkDP to the URL
http://run.plnkr.co/plunks/ therefore becoming
http://run.plnkr.co/plunks/P0fqZG6G6khKKrtfBkDP/
Important: Make double sure you add the trailing /
Open new URL in a new chrome window
Hit F12 in chrome, voila native angular JS debugging for your plnk
Note: You can then continue editing in plnkr, saving, and simply refreshing this URL when debugging, to maintain your active debugging session.
This may change, but currently on Chrome 47.0.2526.111 m on Windows 10, 64 bit, this is how you can find your plunk source files:
Open developer tools (F12)
Open sources
Look for run.plnkr.co
Expand this to show a single directory with a cryptic name
Inside, you will find your files so you can start debugging

Running my program from PyDev with one click?

I am developing using the PyDev plugin in Eclipse. My program uses several classes in several files. I usually run the program using the green "play" icon or using Control+F11. The only problem is that it will run the file, which is currently in "focus". Usually this is not the one containing the starting point of my application. As I run my program something like 200 times a day, this means that I need 200 extra click on the mouse and often forget about this.
Is there any way of setting the default file to launch?
Yes, change the launching to rerun the last launched, so Ctrl+F11 will launch the last one -- and use F9 to launch the one with focus -- See instructions and details at: http://pydev.org/manual_101_run.html
For me, the shortcut is Ctrl+Shift+F9. I don't think I've changed any keybindings, so its strange that it would be different from the official documentation.
Go to Run->Run History, and select the run that is your 'main' run. Now you should be able to use Ctrl-Shift+F9 from any other file to rerun your main. If it isn't Ctrl+Shift+F9 for you, look on the console window that should be at the bottom of your screen showing the stdout after every run. There is an icon on the top of it that has the green start arrow with a yellow arrow underneath it pointing to the right. That is the command to relaunch with the same configuration. If you hover over that, it should tell you the keyboard shortcut you need.

How to programmatically reload a text editor in Eclipse?

In Eclipse, if I change a file programmatically, and it is open in a text editor, it doesn't always reload, not even when refreshing the resource programmatically. How can I forcibly reload the text editor from code so that it show the changed file contents?
In your project explorer or navigator, you can right-click on the file that's currently open and select refresh. This has always worked for me, even when editing files with several programs. Make sure to click the file itself, not parent objects like packages or folders or projects.
Edit
Refreshing programmatically? I would look into an Eclipse scripting tool:
http://eclipse-shell.sourceforge.net/
I guess there was another one called Monkey, but it doesn't appear to be maintained.
I don't know of any possibility to programmatically reload the file.
Some editors (e.g. GMF editors) look for changes in the underlying files, and refresh themselves, but this is not required at all.
I don't think that a forced reload is an option implemented globally, as in some cases there could be some merging steps involved that can be quite erroneous.
My ideas to solve this:
Have a specific editor that refreshes its content when the used resource changes (this can be timeconsuming);
Or close the editors of the file and reopen them (this is ugly in the eye of the user).
Since the Luna release of eclipse there's no need to reload files with F5/manual Refresh.
Really nice, especially as there was a bug with the F5 key binding.

Useful Eclipse features? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have been using Eclipse as an IDE for a short amount of time (about 3 months of full use) and almost every day I learn about some shortcut or feature that I had absolutely no idea about. For instance, just today I learned that Ctrl+3 was the shortcut for a Quick Access window.
I was wondering what your most useful/favorite Eclipse features are. With the IDE being so big, it would be helpful to learn about the more commonly used parts of the program.
My most commonly used features are
ctrl+1 quick-fix / spell-checker
opening files
ctrl+shift+t load class file by classname
ctrl+shift+r load any file by filename
matches are made on the start of the class/filename. start your search pattern with a * to search anywhere within the filename/classname.
Formatting
ctrl+shift+f Format source file
(set up your formatting style in Window | preferences | java | code style | formatter)
ctrl+shift+o Organise imports
Generated code
alt+s,r to generate getters and setters
alt+s,v to insert method signatures for overidden methods from superclass or interface
Refactorings
alt+shift+l Extract text-selection as local variable (really handy in that it determines and inserts the type for you.
alt+shift+m Extract text-selection as a method
alt+shift+i inline selected method
Running and debugging.
alt+shift+x is a really handy prefix to run stuff in your current file.
alt+shift+x, t run unit tests in current file
alt+shift+x, j run main in current file
alt+shift+x, r run on server
There are more. The options are shown to you in the lower-right popup after hitting alt+shift+x.
alt+shift+x can be switched for alt+shift+d in all the above examples to run in the debugger.
Validation
As of the recent Ganymede release, you can now switch of validation in specified files and folders. I've been waiting for this feature for ages.
Go to Project | Properties | Validation
click on the ... button in the settings column of the validator you want to shut up
Add a rule to the exclude group
code navigation
hold down ctrl to make all variables, methods and classnames hyperlinks to their definitions.
alt+left to navigate back to where you clicked ctrl
alt+right to go "forwards" again
This is cool: If someone has emailed you a stack trace, you can copy and paste the stack trace into Eclipse's Console window. You can then click on class names in the stack trace as if your own code had generated it.
In terms of actual features, rather than shortcuts, I strongly recommend taking a look at Mylyn.
It essentially skins Eclipse with a task focussed view. It tracks the files you touch when working on a task, and focusses many aspects of the UI onto the resources that it decides are relevant to the job in hand. Eclipse can be somewhat busy to look at, especially with a big multi module project, and Mylyn helps cut through the cruft. The connectivity to issue tracking software and source control repositories is also excellent.
In my experience, it polarises opinion amongst those who try working with it, which is probably a sign that it is offering something interesting... Don't mean to sound like a fanboy - it is definitely worth a look though.
A shortcut that I use everyday is Ctrl+K. In your editor (not only Java file), simply select a text (like a variable, a function, etc.), and then use this shortcut to go to the next occurrence of this text in the current editor.
It's faster than using the Ctrl+F shortcut...
Note also that you can use Ctrl+Shift+K to search backwards.
Ctrl-Alt (up/down) Copy selected line(s) above or below current line.
Alt (up/down) Move current (or multiple selected) lines up or down
Ctrl-Shift-R Bring up the resource window, start typing to find class/resource
Ctrl-O Bring up all methods and fields for the current class. Hitting it again will bring up all methods and fields for current class and super classes.
Ctrl-/ or Ctrl-Alt-C Comment single or multiple lines with //
Ctrl-Shift-/ Comment selected lines with /* */
Ctrl-. Take you to the next error or warning line
CTRL+PAGE DOWN / CTRL+PAGE UP to switch between opened editors
CTRL+E to also switch between opened editors (allows to type the name)
CTRL+O is extremely important for me. You don't longer need the Outline View then (you can close it which will give you more space). Then, you can type a method name or just the beginning of it and you quickly can get to it. I also use it to inspect what stuff is available. For example: CTRL+O and then type get ... now I see all getters.
F3 while an element is selected in the code: brings you to its definition or it's source. e.g. used on a method call it brings you into the source code of that method.
CTRL+M to maximize the current window
As already said, CTRL+3 is extremely good. It basically allows you to use Eclipse completely without a mouse. Just type CTRL+3 and then package explorer for example.
CTRL+F8 cycle trough perspectives
CTRL+L allows to type a line number and brings you directly to that line.
CTRL+SHIFT+G searches for all references to the selected element in the workspace.
And not a shortcut: In the project settings under Java Editor you can find Save Actions. This allows you to set up the project so that the code is automatically cleaned up and formatted when you save a file. That's very good it safes you from constantly pressing CTRL+O and CTRL+F.
Eclipse auto refresh isn't on by default so if you make changes to a file outside of eclipse, the change won't be reflected in your build. this is very annoying if you just did an svn/git update/rebase and things aren't working the way they're supposed to.
Turn it on in windows->preferences->workspace and tick Refresh Automatically.
Local History
It's a great feature. Eclipse has its own mini-CVS for all files in a project. If you want to revert some change you made, or even restore deleted file - you can right click on the project and select "Restore from Local History".
Just saved my ass *tears of joy*
CTRL+Shift+P to jump to the matching bracket/parenthesis.
One key feature: Shift+Alt+T for the refactoring menu.
Ctrl-shift-T, but only type the initial characters (and even a few
more) of the class you're looking
for. For example, you can type
"NetLi" to find NetworkListener
In the Search window, Ctrl-. takes you to the first leaf of a tree branch
Alt-/ is Word Completion. Slightly different from Ctrl-space
CTRL+SHIFT+X selected text becomes UPPERCASE
CTRL+SHIFT+Y selected text becomes lowercase
I'd like to add two additional shortcuts:
CTRL+F6 Switch between open editors (CTRL+SHIFT+F6 to scroll through the list in the opposite direction)
CTRL+F11 start program in debug mode
F11 start program in normal mode
A lot of the key bindings depend on the perspective and view currently active.
My most used ones for the Java perspective:
ctrl-shift-r open resource
ctrl-shift-t open type
ctrl-1 quick fix/refactor
ctrl-j incremental search
ctrl-h search in files (select a base directory and set scope to selected resources)
ctrl-o list methods
ctrl-alt-h open call hierarchy
ctrl-shift-l list shortcut keys
hit ctrl-shift-l again to go directly to preferences to change key mappings
I am also a fan of Eclipse, however since I spend a majority of my time in Visual Studio, I will suggest that you read Eric Sink's series of articles "C# to Java" (parts 1-4). Not only is Eric always an entertaining read, but this brief series covers some awesome Eclipse insight for those who have not been into Eclipse or have been away from it for a while:
From C# to Java: Part 1
From C# to Java: Part 2
From C# to Java: Part 3
From C# to Java: Part 4
Ctrl-Shift-M while the cursor is on a class name in your java file, will specifically add that and only that class to your imports. This is different from Ctrl-Shift-O which will not only add those imports not already defined, but will also remove imports not currently needed, something you might not necessarily want to do.
I forgot about [Ctrl+2 -> r] scope variable rename. Place the cursor in the variable you wish to rename, press Ctrl+2, then r, then type the new name watching all instances of that variable get renamed at the same time.
It's awesome at refactoring Hungarian Notation.
alt-shift-a is extremely useful in a few situations.
I use a lot of the above and also like for quick search: CTRL+J then type what I am looking for, then CTRL+K for next occurrence.
Lately I've been using the MouseFeeds plugin to automatically tell me what the key stroke combinations are. That way by repetition I remember them better.
This link has a better picture and description of what it looks like and does.
Shift+Alt+b for the simple navigation row over the editor.
I've just released this blog post about Top 5 Useful Hidden Eclipse Features. It contains:
Favorites: Types and members that will always show up in auto-completion
The awesome block selection mode: For multi-line editing
The EGit staging view: Much better than git itself
Type filters: To remove awt and java.lang.Object stuff from auto-completion
Formatter tags: To delimit code sections that shouldn't be auto-formatted
Alt+left and Alt+ right will navigate you forward and back.
I find the project-specific settings useful in Eclipse 3.3.
For example, if you have several developers working on a project who have different code styles for curly braces, line spacing, number of imports etc. then you can specify the style settings for the project. Then you can configure the save actions so that the code is automatically formatted when a file is saved. The result is everyone's code is formatted the same before it's checked in.