Question
The editor brackets can do that. Supposed that, when I click my html tag in my source code file, the browser would automatically highlight the section/div in the broswer like google chrome developer tools.
Step 1
Click my tag in my source code file
Step 2
the live server will automatically focus on the section I want
How could I make it in VSCode?
VS Code does not have a built-in live server. Whatever extension you are using for live server can implement this, however I am not aware of any ones that do currently. Consider filing a feature request against them for this
Look at Five Server extension.
I used to love this Live Preview of Brackets, mainly for two unique features unlike many other editors and extensions:
It shows the preview live, literally. It doesn’t wait for file save to show the changes.
Highlights the section in the preview, corresponding to the html tag in which the cursor is placed currently.
I have been looking for a similar VS Code extension for a while.
Finally found it, JUST NOW.
Related
Trying to create a Live Template in PhpStorm by highlighting a block of text, going to Tools > Save as Live Template.
When I do this, nothing happens. The Live Template dialog does not open and there is no other indication of an error. I can manually open the Live Template menu and add one there.
Is there a setting or configuration that is needed for this to be enabled?
PhpStorm 2017.1.4 on Windows 10
You can turn a highlighted block into a live template, but you need to make sure that there is no leading whitespace in your selected text, or it won't do anything, as explained in the original question.
This is likely a bug, see the issue in the comments to track resolution.
The Chrome "Inspect element" HTML editor is very easy to use with lots of cool features, I love the collapsible elements, highlighting, and live updates so I can see exactly what's happening. Usually when I'm writing I'll create an empty file and open it in Chrome so I can start there. Unfortunately I have to copy everything to the document whenever I want to save and if I accidentally click on a link I lose everything. Is there an extension or something I can use to save the file (Maybe even to google drive?) I've recently accidentally lost a bunch of work a couple times in a row so I need to change something. I've tried brackets, atom.io, shiftedit, and codepen but none of them have the convenience and features of Chrome's console.
Thanks
You can use the Workspaces feature to work with files from DevTools so changes will persist to your computer automatically. Works with all source file types.
Check out Snippets in Chrome DevTools. The code snippets are stored in the browser, and you can run them on any page/site. I find them very useful myself.
You see the DOM in the "Elements" panel. The page may have JS that changes the DOM Tree.
So what you see in the Elements panel is not the source HTML. Therefore you can't just change things in the elements panel and save the changes to your HTML file.
Every other website I visit, the inspector works as expected:
But in many of the sites I'm editing within apache server (using xampp) somehow they doesn't show the "filename.css:lineNumber" data
Also, every change I try to do in the inspector in thse sites, doesn't do anything to the code shown in the source tab.
I've tried refreshing, hard refreshing with cache, closing and opening the tab, closing and opening chrome again. The same problem occurs.
In other sites the inspector works well, but not in many of the localhost sites.
Has someone experienced this before? Is there a way to fix this?
If you are using a client-side CSS generator library such as Lea Verou's excellent -prefix-free or client-side Less, you will not see source information as it has all been processed and reinjected as style elements.
Client-side Less has a property [dumpLineNumbers] to include source line info as a comment in the generated source. (I'm not sure if this will display in Chrome's inspector - but I think it might)
The only "fix" I know of for -prefix-free is to temporarily remove it, obtain the source info for reference, then put it back in.
I have had the exact same problem (not using a css generator), and it appears to be a known bug with the current version of Chrome, the solution is to use the more up to date Beta version known as Chrome Canary - Here's the link :)
https://www.google.co.uk/intl/en/chrome/browser/canary.html
Try to check what the format of your CSS file is. I had the same trouble with the UNIX and Macintosh formats. For example, try to open you CSS file in Notepad++ and in the bottom right corner of the window you'll see your current format. If you see UNIX or Macintosh there, click it with the right button of your mouse and change to DOS/Windows. Then save your file and refresh your page in Chrome. It definitely helped in my case.enter image description here
A lot of tutorials which can be downloaded have the file type of .chm, .pdf, .html, etc. I downloaded a Java SE tutorial of Java SE in HTML format. When I use chrome to view it and everything is good. But I just wonder how could I just directly highlight some useful information (e.g. text) when I use chrome to view it? The html files are local, I know that I could use some software to edit it, like using HTML tag <font color:> etc.
But I just want to highlight it directly in the browser like editing it in word. Is there any suggestion? Dose chrome support such kind of plugin? If you still don't understand what i mean, please refer to "clip to evernote", which is a plugin of chrome and can cut the pages and upload them to the evernote server. when I use evernote client to read them, I can directly highlight some words which is useful to me.
It's much more a SuperUser question, but ... There is a lot of plugins for highlighting web pages out there. You could try Yawas or Simple Highlighter
edit: ok, I think I understood better your problem ... Yawas, Simple Highlighter, as well as most other highlighters, don't hightlight on local pages.
I'm not sure there is such an highlighter available for Chrome, then. What I would suggest is to try opening you documentations with Amaya instead of Chrome. It's both the Browser and the Editor from the W3C; and since it has both functionalities, you probably will be able to do what you want on your local pages.
You can save it to your computer by clicking "Open a new tab containing a list of highlights and notes on just this page". Then you can save only the html contents to your computer with the name as you like. Don't try to use ALT to save the list of note because you will never see the contents what you want to save.
What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.