I have been using Adobe Dreamweaver (2005) for doing web development. I recent switched to VS Code. Dreamweaver has a built in browser where I can inspect a HTML element and it will find it in the editor immediately. This comes in really handy especially when I'm working on messy projects that have been evolving for years. I really like a lot of things about VS Code but this feature is important in saving me a lot of time. Is there any way to get this feature in VS Code?
Thanks
The feature you're looking for is now built into every major browser in the form of dev tools: https://developers.google.com/web/tools/chrome-devtools/open#elements
You can simply click on an element, and in a separate pane, you will be shown the corresponding code.
You can also link DevTools directly to VS code via the extension debugger for chrome in the VS code marketplace - or debugger for Firefox, etc.
However, I recommend starting with the browser dev tools if you're not familiar with them already, as they are simple to use and require no configuration.
Related
I'm using Rubymine 5.4 for Windows and it's overall amazing, and 95% as good as Visual Studio as an HTML / CSS Editor with a few exceptions... the main one being a lack of a live preview /WYSIWYG ability, i.e. as I type I can see the resulting preview live (in addition to VS, DreamWeaver also has this feature). I can't seem to find anything like it in the IDE, help, or any Google/Stack searches.
To be clear, what I am looking for is a way to have a split screen view in RubyMine where I can be editing my HTML / CSS in one pane/tab and be seeing the Live Preview of what it would look like in a browser in another tab/pane.
Ideally, this would be:
in RubyMine itself (using native panes/tabs as described above)
the user could configure whatever browser rendering engine (Chrome, FF, IE, etc...) they wanted to view the preview in...
...however, I could live with any variation of the two above, e.g. simply integrated with RubyMine using external windows/browsers, or maybe, the preview only available with limited rendering engines (only Chrome let's say).
Thanks to #CrazyCoder & #LazyOne for the pointers...
After a bit more research, I've confirmed and gotten more detail:
The solution is to use the Official Jetbrains (maker of RubyMine) LiveEdit plugin which you can find here: http://plugins.jetbrains.com/plugin/?id=7007
Detailed Instructions
Download the JetBrains LiveEdit plugin from here: http://plugins.jetbrains.com/plugin/?id=7007
Run Rubymine > Settings > Plugins (type "plugins" in the search
box in settings)
Click the Install Plugin from disk button at the bottom of the list
Navigate to where you downloaded the plugin and select/open it
Activate by checking it on the plugin list
(You will likely have to) restart RubyMine
Once restarted, go to the menubar > View > LiveEdit (which will then be checked)
Download the JetBrains IDE browser Extension for Chrome here: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon
The Chrome extension supports both WYSIWYG/real-time "LiveEdit" outside the IDE, in an external Chrome window and JavaScript debugging inside the actual RubyMine IDE
I believe there is also an extension for FireFox, which I believe ALSO DOES support
Javascript debugging through the IDE. BUt, I'm not sure if it supports LiveEdit like the Chrome extension
(Launch) Debug your project
Edit as you normally would
Observations/Opinions
The plugin pretty much works seamlessly. I've found it cuts development time significantly by not having to constantly MANUALLY reload the page, i.e. use your mouse or keyboard to bring focus to the browser window and hit refresh... this time adds up especially if you are doing a lot of HTML/CSS and want to check your changes often.
However, I'd suggest turning it off if you're going to do any major back-end/Rails or Javascript as the reload might be slightly longer due to code interpretation/processing and you hit errors as you are mid-statement and the LiveEdit decides to refresh while variables aren't defined or have improper values. In this case, the time you save by not having to manually refresh, may be lost (more than 1x fold) b/c of how often and how long it takes for content to be created/rendered on the server-side or in JS on the client.
Early on I was doing some debugging and testing using the chrome dev tools(known as inspect element). I found out that on the Resources column of the dev tool, Chrome can always access the resources from the server and display them(links, videos, images....). Just wonder how Chrome does that. Is there any way to write a piece of code doing the same thing(access the server resources of other websites, not modifying them but displaying, stuff like, the link of the video currently playing on the website, which usually does not pop up until the play button is hit)?
DevTools doesn't fetch resources from a site. It fetches them from the browser.
There were similar questions already
How does webkit/chrome's WebInspector Resources Inspection work?
and
Getting Information from Google Chrome's Developer Tools
The Chrome Developer Tools has two parts frontend (html+javascript) and backend (C++) and there is an API which specifies the protocol between these parts. You can see the specification here. You can use it for writing your own app instead of standard DevTools frontend.
Also there is experimental debugging API for chrome extensions.
I think the Webkit WebInspector go over the hole source code and match all resources of the source.
So it match <link href="something.css"> and then it place something.css in the resource panel under stylesheets. And exactly the same thing for the other tags.
It's not hard to make regexes for this.
Any specific tools are there to develop the application using html 5?
I had used Aptana studio, I feel it is not fully user friendly tool to write a html 5 application.
http://marakana.com/bookshelf/html5_tutorial/index.html take a look at that for starter points.
This is a great, easy to read tutorial which will almost definitely help you learn HTML5 and CSS - http://net.tutsplus.com/articles/news/30-days-to-learn-html-and-css-a-free-tuts-premium-course/
For debugging, you can use Chromes developer tools (F12 on the keyboard) or the same on Opera & Internet Explorer. For Firefox download "Firebug".
Another "debugging" tool is http://html5.validator.nu/ which will validate your HTML and show any errors.
Notepad++ is a great free app to start developing HTML5 on, you can also use others, for example Aptana is a great IDE. For one with a GUI, I'd advise purchasing Dreamweaver, it is expensive but I say it's the best for learners.
I'd like to analyze the structure of some complex web pages that I've visited. Manually parsing out tags in the HTML source is tedious and prone to errors.
I'd like to find a utility that will accept HTML source (or a URL) as input, and show the hierarchical arrangement of the HTML elements, including source and id attributes, preferably in a treeview.
I was confident that it should be easy to find such a tool, but a few Google searches haven't turned up anything for me. I'm still confident that such a tool exists. Can the community help me find something? (I'm a Windows user and of course would prefer free if possible.)
IE8+ and Chrome both have wonderful developer tools built right in. Just visit a webpage and in IE, press F12, and in Chrome, go to wrench->tools->developer tools. They both show the tree view of the page as well as let you modify it. They're both very powerful.
Most browsers have a DOM viewer built in. Firefox has a third party extension that provides this.
These will all show the DOM after error recovery has been performed by the browser, before then you can't be sure that a valid tree could be constructed.
You can also use any good editor like Notepad++ which has highlighted syntax and node collapsing.
As other have mentioned, most modern web browsers have "developer tools" built into them which include a way to browse the HTML source in a tree-view. I've put together a quick screenshot comparison of the tools that the latest versions of the top five browsers (Internet Explorer 9, Firefox 4, Chrome 12, Opera 11 and Safari 5) offer.
Web Browser Developer Tools Screenshot Comparison
Use firebug or DOMinspector addon on firefox.
Download Firefox (http://www.mozilla.org/) and install the
Firebug addon https://addons.mozilla.org/firefox/addon/firebug/) BOTH ARE FREE
For the last few years I have been using Firefox, Firebug, and the Web Devevloper Firefox toolbar for all my web dev needs, quite happily. I am, however, very interested in experimenting with moving my web dev support over to Chrome, but I have no idea where or how to start. How much functionality is build into Chrome and how do I access it? What add-ins do I need and where do I learn about using them?
These are two of many questions I think face most web devs moving into a much less familiar environment. I'm trying to ask a broader question here, along the lines of, what do I need to use and know for effective web deb and JavaScript debugging in Chrome and where is best to learn what I need to?
Google Chrome (as well as Safari) has really underestimated Developer Tools feature. Lots of developers are indifferent to it and use Firebug through habit. (to no purpose!)
But for me it is the main debug tool: it looks more pleasant than the latter and includes a way cooler features. (e.g. Timeline — separate time intervals for Loading, Scripting and Rendering).
Developer Tools Tutorial.
Can't give up with Firebug? Have a look — Firebug Lite.
More tools.
→ Webmaster tools;
→ Speedtracer;
→ Page Speed.
→ From google webmasters-faq:
There are several tools to help you test your website in Google Chrome:
Web Inspector
Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
Task Manager
Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
JavaScript Debugger
Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.
in chrome: right click and "Inspect Element"
the Light Version of Firebug is available too.
While in Chrome, press Ctrl+Shift+I and start experimenting. It's all you'll need.
The Web Developer port from Firefox is very handy.