Anyone know how you get the yellow popup to appear when inspecting javascript variables in chrome? Apparently you just hover over the variable when the debugger is paused to see a variables current state but for whatever reason I can't get this to work.
If you have no idea what I'm talking about checkout this screenshot:
This happened to me before. Just close all Chrome instances or restart it. This should fix the problem.
I have no idea why this wasn't working but I tired a clean install of chrome on a different user profile on my mac and worked fine. So I went back and dumped all the preferences and application support files and turned off all extension on my profile and it worked!!! So moral of the story do a clean install of Chrome.
The same thing happened to me on 16/12/19, with version 79. But in Chrome canary, it is working fine. People who need can download it here (you can use it for now) or you can use Chrome Dev here
For the people who don't know about Chrome Canary or Dev
Chrome Canary is an experimental version of the popular Chrome browser. Google offers four release channels for its Chrome browser: Stable, Beta, Dev, and Canary. Most people use the Stable release of Chrome, which is rigorously tested and considered very reliable.
By contrast, Chrome Canary may appeal to people who like noodling around with new technology and want to get an advance look at what the standard Chrome browser may look like in the future.
Related
I'm writing a web application (JavaScript, angularJS, etc) that runs better on Chrome, so it tries to launch it when, it's running on Android and it's opened on the default Android Browser.
If Chrome isn't installed, I want it to go back to the Android Browser (instead of the Google Play store).
So I'm using an intent of this form:
intent://localhost:3011/#Intent;scheme=http;package=com.android.chrome;S.browser_fallback_url=http://localhost:3011/?intent=no;end
My problem is that when I run this on my android tablet (no-name, Lollipop 5.1.1, Default browser: Chrome 39) it doesn't work. When I use the separately installed Chrome (trying to load, e.g. firefox which isn't installed) it works.
So in order to proceed I need to know if I'm doing something wrong, or if there's some other reason.
My question really boils down to this: should the browser_fallback_url work in the old default browser, or is it a newer feature in Chrome (so it's useless to my use-case).
Thanks.
I worked on this and wrote about it and updated the official documentation it was introduced in Chrome 40.
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.
How do you set up firebug to debug a grease monkey script?
I've installed firebug on both my laptop and pc. On my laptop it works fine, all the grease monkey scripts are listed under the script tab. However on my pc they don't appear which is unfortunate because I want to work on my pc. They've both got the same versions of firebug, firefox and windows and I have tested them on the same webpage. I can't see any difference in the settings between the 2 machines so am baffled as to why one is working but not the other. Please does anyone have any suggestions as to how to sort this?
You can try using
debugger;
in your code if you haven't already. I've had this work in the past, though it can be finicky.
Sorted this by creating a new profile in firefox.
I was wondering if there are any useful tools people have found to debug javascript on an iPad which is not jail broken. It is an iPad supplied for work so jail breaking is not an option. Through some tedious steps I have gotten firebug-lite working on the iPad but my debugger statements in the javascript are not being hit. There is also no capability that I am seeing to set breakpoints as you can traditionally with Firebug.
I also have Safari's debug console open but that is fairly useless for what I am trying to accomplish.
Thanks for any ideas.
Did you look at webkit remote debugging protocol? It seems they know people want a debugger for their iPad but still no real world native iPad remote debugger is available out there.
But don't get disappointed, there is a tool called weinre that doing what webkit folks willing to do in the future right now!
Update:
By release of Google Chrome for Android phones remote debugging and tablets debugging mobile web apps is no pain anymore. You will need an expensive Google Galaxy Nexus phone with ICS on it to do it. But future is bright! Check out the video demo here:
weinre is Web Inspector Remote. Pronounced like the word "winery". Or
maybe like the word "weiner". Who knows, really.
For those coming to this question from Google, there is now a Web Inspector available in iOS Safari (scroll down to "Safari on iOS"). Note that it requires a Mac computer to use.
Have you tried Firebug Lite?
I haven't used it on the iPad, but I don't see why it wouldn't work.
I'd probably set a conditional include based on if a query param is set - for instance (php)
<?php if(isset($_GET['debug'])): ?>
<script type="text/javascript" src="firebuglite.js"></script>
<?php endif; ?>
Try iDebug. You can direct download it from AppStore onto your iPad. Here's the AppStore Link.
I have recently written a tool for showing console logs in a movable/resizable "window" (actually a div). It provides similar functionality to Firebug's console but you can see it over your page on a tablet. Tablet/Smartphone/Phablet Debug Console
You can also use Firefox's built in WebIDE with Valence
Plugin your device > in Firefox click on the spanner icon > find WebIDE > under "OTHER" click on "Safari, Firefox, and other WebViews on iOS"
[1] https://hacks.mozilla.org/2014/11/mozilla-introduces-the-first-browser-built-for-developers-firefox-developer-edition/
[2] https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/
[3] https://developer.mozilla.org/en-US/docs/Tools/Valence
There is actually a way to debug a website in Safari on iOS using Firefox WebIDE on a Windows machine. I wrote an answer at https://stackoverflow.com/a/35714835/306179 further describing this solution, as it was not necessarily straightforward to set up and use. It does not provide all the Developer Tools you would expect from, for instance, Chrome's DevTools suite, but it at least gives the Console, Inspector, and Debugger.
If you have an Apple Mac computer, you can connect it to your iPad.
First you must ensure that you have the Web Inspector enabled ("Settings > Safari > Advanced" and turn on "Web Inspector").
Then connect your iPad to your Mac via an USB cable.
After that I can choose in the "Develop" Menu of Safari to debug the website displayed on my iPad/iPhone.
Source of images and original information:
https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
Not sure if I'm allowed to re-post my answer from another question, as it's often frowned upon, but in Debug iPad Safari with a PC I posted 3 options of JS console and logging tools that can assist with troubleshooting issues on iOS devices, with screenshots and sample code snippets. One of these is an open source tool I built myself, but the other two are probably even more advanced.
They all make up for the lack of a proper Javascript console and error log in iOS. There's also some additional tools mentioned in the link above. The answers there are likely relevant to this question also.
You can try using Firebug Lite as a bookmarklet. You should be able to use all features without changing the code of your app as Jesse suggested. See this link.
I'm not a Windows Phone developer, and I want as little to do as possible with anything related to Microsoft. Nonetheless, I need to get my mobile web app running properly on Windows Phone 7. What debugging tools are available for the platform? Something like the Webkit developer tools or Firebug would be ideal, either from the phone itself or more likely, remotely debugging from my computer.
If such a thing doesn't exist, I'd settle for being able to read Javascript error messages, and view the contents of variables using alert() or similar. At this point, all I know is that my JS is failing: I don't know where or why, let alone how to fix it.
My dev computer is running OS X, and I'd really like to be able to use these tools from OS X if possible. Assuming that debugging tools exist (which I really hope they do) are they designed for Windows only? If so, does anyone know how well they would work with Wine or similar?
EDIT: I have a physical Windows Phone 7 device, so I can use that. However, alert() doesn't seem to be working, which is why I'm posting this question. Does alert() normally work on the WP7 browser?
You'll likely find the Mobile Perf Bookmarklet to be the easiest all-in-one tool for testing any mobile device.
Works well on the iPhone/iPad/Samsung Galaxy Tab in my testing so far.
Quote:
It displays a menu with links that load other bookmarklets including Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess, and Zoompf.
Unless you have a Windows Phone 7 device, you will need to run Windows in BootCamp and install the Windows Phone Developer Tools in order to test in IE on the emulator. I don't know about Whine, but I ran into major problems trying to test in Parallels - so based on my experience, I suggest keeping it as simple as possible.
There is no console in IE on the phone, so you will need to use alert, like you suggested, or just write text to a div on your page as a custom console.
If you really want to code in OS X (which I definitely understand), using a separate machine for testing IE in the WP7 emulator is going to be your best bet.
EDIT: I just tested alert and it did work fine on my Windows Phone. My guess is that a syntax error is preventing it from calling.
The following may be interesting
Simple IE debug tool for Windows Phone
Supports
Html traversing
Html node styles, properties, metrics
Reading console output
Executing js on device side from console (including intellisense)
Dynamic script injection - ability to debug live sites
Not supported
js breakpoints
Just wanted to add a note to say that full JavaScript debugging is possible now with Windows Phone 8.1 and Visual Studio 2013 Update 2. Full details are available at:
http://blogs.msdn.com/b/visualstudioalm/archive/2014/04/04/diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio.aspx
I realize that this doesn't help the versions referenced in the original question (WP7), but I'm hoping this will help people who may find this question and are running a more recent version.
Something that has worked for me, is to test my mobile pages through the Windows Vista built-in Internet Explorer browser.
It comes with a script debugger ( which you have to enable in Advanced Options tab through the Internet Options menu ), and it seems that it gets really close to the Internet Explorer Mobile implementation.
Another tip would be, that, instead of using window.alerts, you can also use document.write or set output to a div content.
I'm using this hack to have console.log send info back to the server (it uses window.fetch, which I'm polyfilling, but could use xhr instead) https://gist.github.com/wheresrhys/bf93057ee3a594454582