Is there a way to emulate pen events (pointerdown, pointerup, pointermove) using the dev tools?
it seems there is only a way to emulate hand touches but not pen touches.
Related
I know this question may not fit well here but this really is driving me crazy for few hours now :( I use chrome to simulate how websites look on different mobile devices. I clicked something wrong that led to a grid with rulers to appear. I don't know WTF to do to disable this grid. This is the screenshot:
I uninstalled and reinstalled the browser and it returns back.
I reset the developer tools to default settings and it's still there.
This is really becoming a nightmare for me for few hours now. I want the regular emulation without these rulers and grid and top bar. Thanks
There is a small blue button on the left of Elements which actually does the magic.
You didn't click anything wrong. Your Chrome updated itself to 38.2125 and the emulator now has those attributes. Further more, the touch function is broken.
To fix the problem, download the "Canary" version of Chrome. You're still required to see the grid, but the screen is improved and easier to see your layout. Also, the touch function is fixed.
Get Chrome Canary here: https://www.google.com/intl/en/chrome/browser/canary.html
That button just enables/disables the emulator. The OP is looking for a way to disable the background grid while emulating mobile devices.
If you're looking to disable the multi-colored grid lines that show up as an overlay, check out the console dock on the bottom of dev tools. There is a tab labeled rendering and try disabling "Show composited layer borders". If you're still seeing the rulers, that setting is in the Settings (gear) of dev tools, there is an option under the Elements heading for "Show rulers".
I need to right click on an element and go to inspect element.
I have tried to right click but since its a touch device emulator that action doesn't make sense, the dropdown doesn't appear.
It works fine when i am not in the emulator mode checking for things, but when i am in the emulator for touch devices (ipad, iphone, galaxy), I lose the right click.
How do it make chrome open that html tag just like the inspect element, so i don't have to dig through the html trying to find the element i want?
thanks in advance! :)
Left click and hold on the element in the emulation window.
The context menu will then appear, and you'll need to move your mouse to Inspect Element before releasing the click to activate it.
You can use either the magnifying glass in the top left corner of the developer tools, or you could turn off the touch sensor emulation by going to Emulation|Sensors|Emulate touch screen and turn it back on after you find your element.
I have a Windows 7 tablet (an ASUS EP121), and I am using a web browser to display a Google Maps-based web application that I have created. Basically, I want the pinch gesture to zoom the Google Map (similar to using the scroll wheel to zoom a Google Map when using a mouse), rather than zooming the entire web page.
In Opera, Firefox, and Chrome, the pinch gesture simply zooms in the entire page. This behavior makes perfect sense for most use cases, but I'm wondering if there is any setting, in any of these browsers (e.g., Opera, FF, Chrome) that can cause the pinch gesture to behave like a mousewheel instead of zooming in the entire page?
Interestingly enough, in Arora, the pinch gesture can be used to zoom in/out a Google Map; however, other issues are preventing me from using Arora effectively that I think will be more difficult to address than the issues I am raising in this question.
Another option would be to disable pinch gestures (I know this is possible in Firefox, I'm sure the other browsers have some means to do the same), and then try to let the application take care of it. Are there any thoughts on going this route? Would something like jQuery mobile be able to accomplish this?
As a last resort, I could use Qt's webkit and implement my own event handling (basically creating a stripped down Arora), but I'm really hoping there's an easier way that utilizes currently available browsers.
Thanks.
If anyone ever runs into the same problem that I had here, I have created a very simple WebKit-based web browser using Qt that implements a pinch gesture and uses it to fire off a scroll wheel event.
It works quite well (especially for Google Maps) and the source is available on github here. I've tested the code on Windows 7 and Ubuntu Linux 12.04; it works without any problems.
I'm building out my jquery mobile app out and have been testing in Chrome. Its the best for me because the debugging is great.
I was using a TAPHOLD event but decided to go away from that for a swipe-right event.
Chrome actually registered the taphold, so I was hopeful that it would register a swipe right with the mouse. But I cannot get it to register unless I have to do something else... anyone?
By now the actual chrome developer tools (tried chrome 20) can emulate touch and swipe events.
You can activate that behavior through the tool options, accessible via the little gear-wheel in the bottom corner.
Just check "Emulate touch events" from the options. Then you can also swipe with your mouse.
In desktop browsers I tend to use the right mouse button testing swipes. It will open a context-menu but it actually works (I normally use Chrome 17 and Firefox 10).
For instance when left-clicking and then swiping on an image in Chrome or Firefox it selects the image and you are then moving around the transparent thumbnail of the image. But when right-clicking and swiping the swipe event is fired.
UPDATE
This update is pretty late to the punch but this just shouldn't be necessary anymore. In fact the Chrome developer tools (the ones I'm used to using) have gotten a lot better about emulating devices.
A lot of the answers here are old and out of date. As of Chrome 63, swipe is built-in as long as you are in responsive mode with developer tools open. So open Developer Tools (3 dots->tools->developer tools), then click the phone/tablet icon on the left to put Chrome into a mobile mode. Then if you left click and hold, you will see the cursor changed to a dot, and you can swipe.
Update: this appears to be enabled in Chrome by default (37.0.2062.120 as of September 2014) you do the following:
Open Developer Tools
Click the little phone icon next to the search icon in the upper left (next to the Elements tab)
In the Emulation tab on the bottom choose a device model from the drop down
Previous answer:
To get this working in the current version of Chrome (32.0.1700.107 as of Feb 2014) you do the following:
Open Developer Tools
Click the gear icon in the upper right
Select the Overrides tab on the left
Click on Show 'Emulation' view in console drawer
Close the Settings popup
Open the Console (button to the left of the gear)
Click the Emulation tab in the console (next to Console and Search)
Choose a device and click on Emulate (and click Reset to cancel emulation)
I'm trying to get up to speed on HTML5 by prototyping an extremely simple drawing app using <canvas> and touch events like ontouchstart and ontouchmove.
This is displaying and working fine in an Android emulator where I use mouse clicks to simulate touch events. However, it doesn't work at all when running in my desktop browser (Safari 5.1.1, Firefox 7 on Windows).
I thought the mouse click events would be interpreted as touch events like they are when running within the emulator.
I wonder now if perhaps desktop browsers simply don't support touch events.
It's actually the other way round. Mobile browsers translate touch to mouse events for legacy support. If it needs to work on both mobile and desktop, and you don't really need touch events, you could just use mouse events instead. Failing that, bind both touch and mouse events and have the touch event cancel the mouse event. This way on mobile devices the touch fires and mouse doesn't. On desktop the touch doesn't fire and the mouse will.
For pilau, here's a simple example of cancelling the click event on mobile devices. Please note the question is more about drawing which would involve click dragging, which would require a bit more code for detection, but the basic idea is the same, bind the events you need to handle. Then e.preventdefault() will stop the mobile browsers from emulating click type events.
$('#element').on('touchend click', function(e){
// Do your onclick action now
// cancel the onclick firing
e.preventDefault();
});
Firefox 6 and above supports the touch events. See the compatibility table here.
MDN article on Touch Events
EDIT : Are you testing with a touchscreen or the mouse? The mouse events do not automatically translate to touch events. See this post for how to simulate touch events with a mouse.
ontouchstart will be a add on to the iphones version of webkit for javascript. you could test it but only on an emulator.
If you are working with react, the synthetic events are different:
onClick Works for both, mobile and desktop.
onTouchStart works only for mobile. Also, this event goes before the onClick event. Maybe it is the first event to being trigged.
In my case, I needed an event before the onClick event in a mobile and desktop environment, so I used onMouseDown. which with synthetic events from React, works for both, mobile and desktop.
Remember, for development propose, the easiest way to test in mobile or in desktop is with the developer tools, clicking on Toggle device toolbar or cmd + shift + M in the inspector.
Good luck!