I'm looking for a way to record every thing I do in Chrome Devtools so I can play it back verbatim. I've seen a lot of docs on how to manipulate page content, track page performance and behavior etc from devtools extensions, but nothing yet about actually watching what I do in Chrome Devtools itself. I'd be willing to write an extension if that's what needed. The goal is a teaching tool where I can record things I'm doing in devtools and play them back. (Of course, one could use a GIF recorder but that's so 00's). Something I've looked a little bit at so far is chrome devtools protocol viewer but not sure if it could accomplish the task.
Can anybody suggest a potential way to accomplish this? Thanks in advance!
Now Chrome has an inbuilt recorder tool available in the Dev Tools. Much better than installing any 3rd party extension. Additionally, there are many more features to track the user journey.
Recorder in Chrome Dev Tools
You may try using Desktop Capture API which can be used to capture content of screen, individual windows or tabs. Here's a demo app that shows you how to use a Chrome extension to access the desktopCapture API in your web-application. Additional reference which might help: In chrome extensions, is there a way to record screen without ssl?
My project using GWT. I haved installed GWT plugin for my Chrome Browser before . I am using the newest version of chrome .When run the project, Chrome browser alway announce
Development Mode requires the GWT Developer Plugin
I have attached the image bellow
But when I click to the link. Chrome browser go to page of plugin in the Chrome web Store. But it announce me that my chrome browser haved installed this plugin. I have attached the screenshot bellow
How can I make GWT plugin work with my project ?
Thank for any help
From GWT Website ,http://www.gwtproject.org/release-notes.html#Release_Notes_2_6_1
GWT Development Mode will no longer be available for Chrome sometime in 2014, so we improved alternate ways of debugging. There are improvements to Super Dev Mode, asserts, console logging, and error messages.
This is because of newer chrome version.Use Super Dev Mode
Other Solution is you can enable NPAPI which was disable in chrome 42 version follow the below steps
1.Open New Tab and Enter chrome://flags/#enable-npapi
2.Enable this Enable NPAPI Mac, Windows
3.Then bottom of the page click "Relunch" button.
I had the same issue this morning.
Switching to super dev mode:
select your project in the Project Explorer -> Debug as -> Web Application(Super Dev Mode)
Console will say:
The code server is ready.
Next, visit: http://127.0.0.1:9876/
Do so and follow instructions there.
Quick recap: Firefox nuked APIs that DevMode needed in 27.0, more than a year ago; Chrome announced approximately at the same time that they were deprecating NPAPI, that DevMode needs. They first made it impossible to update extensions containing NPAPI plugins in the Chrome Web Store a year ago, then they removed NPAPI support on Linux, and now they've just disabled NPAPI in Chrome 42, and will remove support entirely in 45, to be released in September.
"Classic" DevMode is deprecated for nearly 1½ year now; it really is time to move to SuperDevMode!
It's very likely that you are following word for word the instructions from Google at this link.
https://developers.google.com/eclipse/docs/getting_started
The instructions are out of date, and not valid for current versions of chrome.
Instead of selecting the option
Debug As > Web Application
use the option
Debug As > Web Application (GWT Super Dev Mode)
Google has "given up" on keeping their documentation up to date. I can only imagine how difficult it must be to ignore so many complaints.
From GWT Website ,http://www.gwtproject.org/release-notes.html#Release_Notes_2_6_1
GWT Development Mode will no longer be available for Chrome sometime in 2014, so we improved alternate ways of debugging. There are improvements to Super Dev Mode, asserts, console logging, and error messages.
This is because of newer chrome version.Use Super Dev Mode
NPAPI can be re-enabled in Chrome but it is going away.
Super dev mode supposed to be the way forward but I prefer the classic dev mode.
I'm using Windows. I installed a version of Chromium to stop this being a problem for me. The version I found to be the last of the 41 series was build 310958 which can be obtained here:
https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win/310958/
You need to download the mini_installer.exe file. This version of Chromium will never update itself.
I recommend also that you make a copy of the GWT Developer Plugin that you can install without using Google's store because I believe it will be removed soon. I don't know how to do that, but one member of my team claims to have done it.
This issue is there, as Google has now completely discarded NPAPI which is required by GWT developer plugin which can been seen here:http://blog.chromium.org/2013/09/saying-goodbye-to-our-old-friend-npapi.html
Google now provides "Super Dev Mode" which does not require NPAPI.
For utilizing that you can check this blog: https://www.sencha.com/blog/getting-started-with-gwt-super-dev-mode/
Firefox Portable 26.0 supports the GWT Developer Plugin needed to work with Classic Dev Mode. You can install that along side an up-to-date browser.
For some reason, Super Dev Mode still does not work with some projects. This workaround has worked best for our team.
To get it working on Mac: download this version (Version 38.0.2084.0 (281482)) and install the plugin from the Chrome Web Store.
I did the same thing as suggested by davtom and it worked. I download the chrome-win32.zip file from https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win/310958/ . I unzipped the files in a temp folder and run chrome.exe from there.
Thanks Davtom. This problem was driving me nuts for the past 3 hours. I rebooted, installed a different JDK, uninstalled and reinstalled the plugin but nothing worked.
To overcome this problem, Install very old version of chrome version 10 and run the app in super-dev mode. It would run as it should. There is no requirement to install GWT plugin for this version of chrome.
I was wondering if anyone could provide me with some links to some tutorials or explain (with some example code), how I would go about making a simple google chrome extension (or in any programming language or browser if that is impossible), how I would make an extension that can visit a specific site, fill a login form on that site, click some links and then do the same sort of thing on the linked to site.
Thanks
Personally, I would not use a chrome extension, but maybe a perl script. There is an extension called WWW::Mechanize that is designed exactly to do this kind of stuff.
You can find plenty of tutorials and examples, just google it.
Edit in 2021: the above recommendation has become a bit outdated since 2013. For a more up-to-date take, I'd still recommend a scriptable headless browser instead of an extension for most automation tasks, but probably not WWW:Mechanize. There are good lists of options, such as this one.
What I want to do is that when the user clicks a button I will add to firefox (or clicks an option I will add under tools, etc), a new tab should be opened, and in the tab will essentially be an offline website that is written in HTML/CSS/JS and will be part of the addon.
How can I do this? It does not matter to me if I require a very new version of firefox to accomplish this.
Making your first firefox addon can be quite challenging, at first. But once you make one, things get much better. Here are some tools to help you get started:
https://addons.mozilla.org/en-US/developers/tools/builder
I suggest you start with this and check all the features. Once you download the skeleton, look over ff-overlay.xul in the /chrome/content folder. It should be straightforward if you know XUL/Javascript.
https://developer.mozilla.org/en/Setting_up_extension_development_environment
This link helps you set up Firefox for easy addon testing and debugging.
https://developer.mozilla.org/en/Code_snippets/Tabbed_browser
The Mozilla Developer Network is incredibly useful. For example, that link takes you to a page that explains everything about switching tabs.
https://builder.addons.mozilla.org/
Addon playground.
Remember, Google's your friend! Good luck!
I'm attempting to find a bottleneck in my Javascript. Basically I'm developing a chrome extension written in Javascript which is taking 4-5 seconds to perform a task. There's a lot of code involved in the task and using print statements / chrome built in dev tools just isnt working. The dev tools don't seem to even see my Javascript running. I'm wondering if anyone has any advice / tools they think could be of benefit?
Open your page in Chrome.
Tools -> Developer tools -> Profiles
Start Profiling (3rd button, grey circle on the status bar at the bottom)
Perhaps it'd be a good idea to open the HTML files in Firefox instead of letting Chrome extensions handle it. That'd allow you to use Firebug to determine any causes, which would be very helpful.
I remember Google Chrome has a built-in JavaScript profiler. Or can't you use this for your extension? (I have never built Chrome extensions.)
You can try to use Profiler as it was mentioned before or Timeline.
Timeline will help you if the time was spent in native code.