viewdy / phantomjs2

Automatically exported from code.google.com/p/phantomjs
BSD 3-Clause "New" or "Revised" License
0 stars 0 forks source link

Debugging with Web Inspector #6

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago
The ability to debug the script using the JavaScript Debugger inside Web 
Inspector

Original issue reported on code.google.com by ariya.hi...@gmail.com on 28 Dec 2010 at 4:55

GoogleCodeExporter commented 9 years ago
You might look at the project that does this for node.js

Original comment by sroussey on 25 Jan 2011 at 8:35

GoogleCodeExporter commented 9 years ago
[deleted comment]
GoogleCodeExporter commented 9 years ago
This is easier than that because QtWebKit has already support for Web 
Inspector. I just need to figure out the sensible way for the developer to use 
it.

Original comment by ariya.hi...@gmail.com on 25 Jan 2011 at 4:50

GoogleCodeExporter commented 9 years ago
Ariya do you know WeInRe? http://pmuellr.github.com/weinre/

It has been a lifesaver for me debugging html5 apps on Android/iPhone and I was 
thinking of using it with phantomJs. 

I don't know if it was what you were thinking, as soon as I try it I will give 
my feedback.

Original comment by jracab...@gmail.com on 27 Feb 2011 at 1:37

GoogleCodeExporter commented 9 years ago
Yes I know WeInRe. But we do not need that because QtWebKit has integrated 
support for Web Inspector already.

Original comment by ariya.hi...@gmail.com on 27 Feb 2011 at 4:32

GoogleCodeExporter commented 9 years ago
Let's postpone this after issue 31 is resolved. The reason: having built-in 
remote debugging support will be easier, i.e. using another WebKit-based 
browser to debug PhantomJS.

Original comment by ariya.hi...@gmail.com on 13 Mar 2011 at 7:02

GoogleCodeExporter commented 9 years ago

Original comment by ariya.hi...@gmail.com on 14 Mar 2011 at 4:39

GoogleCodeExporter commented 9 years ago
Formatting the output from the console API for the terminal would be nice. For 
example `console.dir(window)` will output a tree in the web inspector, but 
phantomjs that displays the same output as `console.log(window)`. Coloring the 
output of `console.warn`, `console.error` and the like might help out a lot, 
too. Not exactly full on debugging, but it would help.

Original comment by sc...@corgibytes.com on 15 Jun 2011 at 2:26

GoogleCodeExporter commented 9 years ago
Hi.  QT has built in support for WebInspector and I have hacked up some code to 
enable WebInspector with command line --load-inspector=yes 

This weekend I will try to make a fork so you can check it out... it's only 
about 20 lines of code

Original comment by owenda...@gmail.com on 16 Jul 2011 at 7:05

GoogleCodeExporter commented 9 years ago
Are you talking about local Web Inspector or remote one? I believe this remote 
debugging makes sense in the headless context.

Original comment by ariya.hi...@gmail.com on 21 Jul 2011 at 8:45

GoogleCodeExporter commented 9 years ago
Owen, can you post your patch for web inspector?  That would be hugely helpful .

Original comment by bl...@kimalabs.com on 12 Sep 2011 at 11:54

GoogleCodeExporter commented 9 years ago
Some info (from Chrome, but that applies to WebKit):

http://blog.chromium.org/2011/05/remote-debugging-with-chrome-developer.html

http://code.google.com/chrome/devtools/docs/remote-debugging.html

Original comment by ariya.hi...@gmail.com on 5 Oct 2011 at 6:47

GoogleCodeExporter commented 9 years ago
I have some basic super hacky work on this right now. Not completely happy or 
done with this yet, and still ironing out the details.

Remote debugging only works with qtwebkit-2.2 and a QtWebkit-2.2 browser. 
Non-remote debugging only works with QtWebkit-2.0, haven't fixed a js deadlock 
when setting breakpoints in 2.2. 

Comments and the like appreciated, I couldn't get the inspector to load on the 
JS without embedding it in page to load, rather than injecting it into the 
frame.

https://github.com/KDAB/phantomjs

Original comment by lfran...@gmail.com on 3 Nov 2011 at 10:01

GoogleCodeExporter commented 9 years ago
Awesome work, Leo!

I hope once Qt 4.8 this is not a big deal since it comes with QtWebKit-2.2.

Do you think it can work with latest version of Safari or Chrome?

Original comment by ariya.hi...@gmail.com on 5 Nov 2011 at 3:14

GoogleCodeExporter commented 9 years ago
I'm not sure. It should in theory, looks like there's a problem with the 
handshaking. I'll take a look tomorrow, i hope it'll be relatively 
straightforward. The hardest part might be getting a debug build of chrome to 
examine what it expects :)

Original comment by lfran...@gmail.com on 7 Nov 2011 at 12:00

GoogleCodeExporter commented 9 years ago
Turns out I was just using a too-old version of Chromium. Using a more recent 
build makes it show up.

However, the inspector fails to load the various tab panes / icons. 
Interestingly the same happens when remotely-debugging Chromium from 
QtWebkit-2.2. Looks like some incompatibility. 

Original comment by lfran...@gmail.com on 8 Nov 2011 at 3:54

GoogleCodeExporter commented 9 years ago
For those interested:

https://github.com/ariya/phantomjs/pull/174

Original comment by lfran...@gmail.com on 16 Nov 2011 at 3:45

GoogleCodeExporter commented 9 years ago
Initial patch has been merged. It requires a patched Qt-4.8 build that can be 
build with the build-linux.sh script or my fork of qtwebkit.

Comments appreciated!

Original comment by lfran...@gmail.com on 18 Nov 2011 at 1:42

GoogleCodeExporter commented 9 years ago
Is it possible to debug the page being opened by the WebPage module?

It seems that I am debugging the phantomjs script instead.

Any ideas, that would be helpful.

I am having a situation with mixed results on render.  Sometimes it works, 
sometimes it does not.

The page relies on a couple of ajax calls to populate some boxes, with html, 
svg, anything.

Sometimes it works great, other times the boxes are in a loading state.  This 
is a difficult thing to put my finger on, except that it is not phantom becuase 
wkhtml has the same issue.  I do not know what to do.

Original comment by michaela...@gmail.com on 31 Jan 2012 at 10:54

GoogleCodeExporter commented 9 years ago
I see that this pull request has been merged: 
https://github.com/ariya/phantomjs/commit/61f44342471a4ac49ab8280ab61b92e17a74e7
6c.

However, merged to what? I am a git newbie. Can I grab "master" and build that? 
Do I have to patch some part of QtWebKit, as it said in the original pull 
request?

Original comment by dfran...@gmail.com on 21 Feb 2012 at 7:34

GoogleCodeExporter commented 9 years ago
Just use PhantomJS 1.4 as it already has the option to build with inspector 
support. Please read the release notes.

Original comment by ariya.hi...@gmail.com on 28 Feb 2012 at 3:42

GoogleCodeExporter commented 9 years ago
Related new issues:

issue 430: Make remote debugger works on Mac OS X and Windows
issue 431: Improve remote debugger wrapper

Original comment by ariya.hi...@gmail.com on 14 Mar 2012 at 4:38

GoogleCodeExporter commented 9 years ago
BTW, this is now the standard build for PhantomJS 1.5, the infrastructure is in 
place and it is working great on Linux.

The issue will be marked as fixed.

Original comment by ariya.hi...@gmail.com on 14 Mar 2012 at 4:39

GoogleCodeExporter commented 9 years ago
I am very a glad to see debugging feature in phantomJS, you rock guys. But 
please, give a short explanation on how to use it! I compiled phantom 1.5 from 
source yesterday (ubuntu 10.04 64 bit), then wrote a simple console.log('hello 
world'); phantom.exit(); - it works and runs successfully. Then i run it with 
option --remote-debugger-port=9000, open localhost:9000 in Chrome and all is ok 
- inspector tabs and everything is on my screen. I went to 'scripts' tab, my 
phantom script was there. I put a breakpoint and cant run the script! how 
should i start the execution? There is no 'run' button there. I tried to 
refresh the page, and it did not help.

Original comment by vasi...@hotger.com on 22 Mar 2012 at 6:45

GoogleCodeExporter commented 9 years ago
Please be patient a little bit, see 
https://groups.google.com/d/msg/phantomjs/s3KwLo4P1LQ/ZN4js0M2LuUJ and just 
watch http://code.google.com/p/phantomjs/wiki/Troubleshooting in the next 
coming weeks.

Original comment by ariya.hi...@gmail.com on 22 Mar 2012 at 6:47

GoogleCodeExporter commented 9 years ago

Original comment by ariya.hi...@gmail.com on 23 Mar 2012 at 5:20

GoogleCodeExporter commented 9 years ago
This issue has been moved to GitHub: 
https://github.com/ariya/phantomjs/issues/10006

Original comment by james.m....@gmail.com on 16 Mar 2013 at 12:17