I have been practicing angularjs tuts from various tutorials,
I ran across a video tutorial which shows/depicts the live edit of html+angularjs in chrome browser
I am bit amazed with the feature , i am searching for the same since a day and unable to get any such feature,
Alterntatively i tried with webstrom7 which is bit buggy not working with chrome properly on frequent occasions, I know that brackets.io does implement such feature but i would be appreciating the below chrome live edit.
can anyone identify this live editor feature from the pic and suggest the best way to grab it for windows box - is the below a plugin ?
Is Batarang. a Chrome Extension!
Related
I'm currently working on a webpage and I'd like to implement a function to share this website to friends of the website-visitor.
Therefore I've integrated the Whatsapp-sharing URL Scheme.
<a href="whatsapp://send?text=text-to-share" data-action="share/whatsapp/share">
share-button
</a>
But there is a better way in iOS - I'd like to open the iOS-share-menue:
iOS sharing-interface
Do you know, if there is any possibility to open this?
The iOS-Amazon-App does this within the product-pages.
I'm looking forward to your answers.
best regards,
Christoph
Google has introduced the Web Share API for Web applications in Chrome. I think your problem is similar to this question. https://stackoverflow.com/a/42081215/4711785
Here is a link to a page which provides information on how this can be done and also a link to an example of this working...
(I have not copied the code from the article or the W3C source into my answer in case this is some sort of copyright violation)
https://w3c.github.io/web-share/
I have tested this on safari, chrome, and edge on IOS and macOS as of Oct 2022 and it worked perfectly...
I also tested it on the Opera browser running on a Huawei phone running their OS (not android) and again it invoked the OS'es share menu...
I fully expect this to work just as well on Windows and Android devices but I don't have any to test with...
Info and code to make it work: Web.dev article
and,
An example page you can use to test your device/browser...
open device share menu using web page button demo
Sorry if this is posted in the wrong place but I'm trying to find a download link for the old GWT Dev Mode plugin on the Chrome browser, however the link to the google store appears to be dead. Anyone got a location online I could get it from ?
Thanks.
The link was purposely removed, because the plugin does not work with chrome anymore.
Some googling lead me to this question which lead me to this discussion which contains several links to old versions of the plugin, including this one.
But I'm very dubious about why you need this plugin. The only way it would work is if you have a very old version of Chrome, and at that point I'm not sure why you're testing via the plugin anyway. You should be using Super Dev Mode instead.
I used this nifty feature that chrome had for quite a while called "canvas inspector". It was an experimental dev feature that had to manually be enabled.
It was quite helpful when working with webgl via something like THREE.js where you can easily create a bunch of undesired draw calls by accident.
Also, it worked on any website, you could simply take a snapshot and see whats going on in the canvas.
It... miraculously disappeared one day, and google does not give any insight.
I've tried some extensions but they dont feel nearly as good, or i couldn't even get them to work. Is there another way to get this back into chrome?
Apparently it was doing some cheeky stuff that they didn't want in the main project so it was removed in this issue: DevTools: make Canvas profiler an extension
We can make it an extension though. This bug is for tracking removal of the canvas profiler from the DevTools. There will be a separate initiative of porting the code being removed into github and publishing it as a Chrome extension.
According to that issue they might move it to an extension in the future but I haven't found any traces of it as of now. They haven't responded to a question in the above issue about where the new issue could be tracked.
Chrome and Firefox have both removed their Canvas inspectors...
Original Answer:
This is not exactly what the question asks for, but Firefox has a canvas inspector integrated:
https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/
You can enable it in the settings of the normal inspector
EDIT: (2019)
The Canvas Inspector has been removed as of Firefox 67:
Mozilla deprecated listing
Bug report with reasoning
Alternative:
spector.js - Recommended alternative by Mozilla
Canvas inspection was just removed!
You can download an old version of Chromium here like Chromium_OSX_43.0.2357.81.dmg. (Provided by freesmug)
Happy Canvas Inspection!
This is the best extension inspector I’ve seen so far.
https://spector.babylonjs.com
First go into
chrome://flags
Then enable
Developer Tools experiments
Then after restarting your browser, open the devlopers tools by hitting f12, then in the top right corner is a gear. Click on it, go to experiments, then find "canvas inspection". It's unstable, but usable.
WebGL does not work in the following three scenarios:
(for the 'test webgl' site used get.webgl.org)
1 Start chrome, Google search for the 'test webgl' site, click on the link in the search result.
2 Go to the 'test webgl' site from a link in an email.
3 Start Chrome from a short cut or command prompt, "C:\Program Files\Google\Chrome\Application\chrome.exe" http://get.webgl.org/
This only happens when Chrome is not already running. In other words WebGL does not work when chrome starts up. However it does work if chrome is already running.
The best demonstration is scenario number 3, above. This starts chrome and goes to http://get.webgl.org/ and Webgl does not work. Then do exactly the same again but this time with chrome already open and Webgl works.
Would very much appreciate feedback or a solution, thanks.
Have also created various test sites in html, javascript and webgl, in order to find a work-around. For example if webgl is not available then allow the user to click on a link to open the page in a new tab, this does not work. However if the user opens a new tab then loads the page, webgl is detected and works.
In short, if a customer opens chrome and searches for your website (that has webgl content). Then clicks on the link, webgl will not work. It does not seem reasonable to then instruct the customer to open a new tab and then go to the same website a second time. So far have not been able to find a solution so that it just works without the customer having to fiddle around.
I realize that this may be a chrome issue as it does not occur in firefox, however am trying to find a javascript solution rather than waiting for chrome developers to fix it.
Thanks for any suggestions.
(Windows XP Pro, Chrome V36)
Hi Mack,
Thanks for your reply. The majority of visitors to my web site have XP and Chrome. I should imagine that this is true for quite a lot of peoples, websites.
Problem 1 The first fallback I had on my website was to detect if webgl is supported. If yes then continue as normal. If no then display a help page. This was simple and worked, however, google crawlers do not handle the javascript very well, therefore always index the webgl help page, rather than the home page.
Solution 1 Managed to fix this by having a popup box appear when webgl is not supported, giving the user a choice of whether to continue or go to the help page. The conditional code that processes the user response is arranged so that if the user is a google crawler then it simply 'falls through' and displays the html content of the home page, and not the help page.
There are lots of web sites that seem to have this same problem, including get.webgl.org, in other words, if you do a google search for a website, and that site contains webgl detection and fallback code, the search result always shows the fallback content, rather than the authors intended main content.
Problem 2 Now that I finally have the home page listed correctly by google, found that am still losing many customers, as they are starting chrome, searching google for my site 'suit yourself shirts', clicking the link in the result and being told incorrectly that webgl is not supported.
Am very interested in your solution but do not quite understand how it works. Have tried detection then page refresh or load the page in a new tab or display a link for the user to load the page, but none of these methods seem to work. Seems like quite a fundamental problem that would effect many webgl websites. Would be very greatfull if you could explain your suggestion a little further. Thanks for your help, kind regards - Gary
The usual recommendations for a web development and debugging web browser are Firefox/Firebug or Safari/Web Inspector.
But I like Google Chrome, and would like to use this as my primary development browser. What plugins or tools should I get to optimise my web programming experience with Chrome?
Google Chrome's own "Firebug" is very good, just right click and inspect element to bring it up.
Frame two pages is helpful.
Chris Pederick's Web Developer toolbar is good too.
The Development and Coding Search (Chrome extension) is one of many Chrome extensions for developers. See the featured web development extensions for more developer-friendly extensions.
Pendule has a lot of good bits and bobs under one extension/icon. Few things I like about it...
View generated source
Colour picker
Ruler
Validator
There are probably tons of alternatives, but it's the best I've seen so far.