Friday, December 12, 2014

Chrome Developer Tools Enhancement - highlight on change

Recently I submitted a patch for Chrome Developer Tools to add the support for "Highlight on change" feature to the Scope Variables and Watch Expressions sidebar panes. Here is the feature in in screenshots:




The idea is that it highlights the properties whose values change or when the property itself comes into existence (in which case the property name is highlighted). You say you don't want to wait and want to give it a try right now! No fear...you can use my Devtools App to try this out.


Just install the Devtools App from Web Store into your Chrome browser and follow the instructions on the blog tab or read the blog entry directly.

Make sure to use this URL (in the text box after /# in Devtoola App UI above) to point to the devtools which implement the above feature:

http://chrome-developer-tools.googlecode.com/git/devtools-frontend/Source/devtools/front_end/inspector.html

Feedback welcome.

Sunday, September 07, 2014

UPDATE: Desktop App v0.6 available

A newer version (0.6) of Desktop App is now available here. The UI is much more simple. The app was developed using AngularJS and Bootstrap.


I had blogged about it in this entry before.

Saturday, July 26, 2014

UPDATE: DevToolsApp now works with Chrome 36.0

DevToolsApp allows you to try different versions of Chrome Dev Tools including the latest from Chrome repository.

UPDATE: See

In this blog entry I talked about the DevToolsApp (available on Chrome Web Store).Now it works with the Chrome 36.x - your standard desktop browser. No need to download Chrome Canary.

To use it:

  • Install DevToolsApp
  • Download latest Chrome 36.x
  • Launch Chrome with command line:
> chrome --remote-debugging-port=9222 --no-first-run
  • Navigate to a page you want to debug
  • Launch the DevToolsApp, select the version of the DevTools you want to debug with from the drop down and then run it by clicking on Run button next to the drop down.
  • You will be shown the grid of pages available for debugging. Select the one you want to debug.

Enjoy!

Saturday, May 17, 2014

UPDATE: Chome Devtools Network Panel export and import

In this blog entry I talked about an idea about exporting and importing raw network data from Chrome Devtools Network Panel. I have made quite a bit of progress implementing the idea. I am now able to export and import the raw data. I am also able to clone the Network Panel. The only bit that remains is to convert the raw data into network requests and load them into the cloned Network Panel.




I have filed the issue.

You can try out the implementation using my DevToolsApp (download from Chrome Web Store). Use the following URL for export/import raw network data capable Chrome Devtools:

https://sandipchitaleschromedevtoolsrnd.googlecode.com/git/Source/devtools/front_end/inspector.html

I have added this URL to the preconfigured URLs in DevToolsApp and the new (1.1) version of DevToolsApp should appear soon on the Chrome Web Store.

Feedback is welcome!

Thursday, May 08, 2014

UPDATE on Windows 8.1 Thin Taskbar

I love the feature of 7+ Taskbar Tweaker which was recently updated to enable making the Windows 8.1 Update vertical Taskbar, 1 small icon width thin. The issue with the notifications area has also been fixed making the toolbar truly thin.




However, one does not have to have the 7+ Taskbar Tweaker running all the time. So I wrote this simple c# program to start and stop 7+ Taskbar Tweaker after reboot or after changing the set of monitors the computer is connected to. The start and stop restores the thin taskbar. Of course if you are using other excellent features of 7+ Taskbar Tweaker (thank rammichaels for that) you can let it start at startup and leave it running.

using System;
using System.Diagnostics;
using System.Runtime.InteropServices;

namespace ThinTaskbar
{
    static class Program
    {
        #region Native API
        // The native API functions/enums/structs needed to access taskbar info
        // consult MSDN for more detailed information about them

        [DllImport("user32.dll")]
        private static extern IntPtr FindWindow(string lpClassName, string lpWindowName);

        // [DllImport("User32.dll")]
        // private static extern bool MoveWindow(IntPtr hWnd, int x, int y, int cx, int cy, bool repaint);

        #endregion

        ///
        /// The main entry point for the application.
        ///
        [STAThread]
        static int Main()
        {
            // Start and stop "7+tt"
            ProcessStartInfo startInfo = new ProcessStartInfo();
            startInfo.FileName = "C:\\Users\\sandip\\AppData\\Roaming\\7+ Taskbar Tweaker\\7+ Taskbar Tweaker.exe";
            startInfo.WindowStyle = ProcessWindowStyle.Hidden;
            Process sevenplustt = Process.Start(startInfo);
            System.Threading.Thread.Sleep(500);
            sevenplustt.CloseMainWindow();
            sevenplustt.WaitForInputIdle();
            sevenplustt.Kill();
            return 0;
        }
    }
}

IMO, thin vertical taskbar should be standard feature (make it an option) of windows desktop when used in traditional way - keyboard + mouse. I understand why the Taskbar needs to be little thicker for touch interface to work correctly, but it is not as if everyone has switched to touch interfaces. Also why can't this be an option, possibly even turned off by default Microsoft wants to discourage it. I do not like it when they know better that the users. This reminds me of debate on Mac OS as to why the windows cannot be resized from all side, which the Apple and their fanboys ridiculed for long time and now Mac OS supports it. Go figure!



Eclipse: Show All Instances of Java Type Eclipse Plugin works for Groovy classes

In this blog entry I talked about the Show All Instances of Java Type Eclipse Plugin. Not surprisingly it also works while doing Groovy/Grails debugging also.



Install the plugin from Eclipse Marketplace website or Eclipse Marketplace Client.



Enjoy!

FireJSOD available on Mozilla Add-ons site

Available on Mozilla site: https://addons.mozilla.org/addon/firejsod/

Tuesday, May 06, 2014

Idea: Chome Devtools Network Panel export and import

Sure Chrome Devtools Network Panel has the Save All as HAR with Content menu :


Unfortunately I am not able to save the raw network data to a file directly. So I cam up with this solution:

File selection dialog for selecting .rnd files:

Imported Network Panel


but that saves the network traffic in HAR format - which is a standard format but does not capture the network traffic as one sees it when it is live. Also when viewed in HAR viewers the requests get grouped by pages, instead of the exact order in which the requests were issued. This especially is sub-optimal when tracking multi-page redirects - especially when the Preserve Log is checked.

To me that is not satisfactory. Instead why not export the raw data from Network Panel and when imported load it in a separate Network Panel. That way you can exactly see the way it was recorded initially. Granted this will be very specific to Chrome Devtools, but then who uses any other browser :) Just kidding.

Anyhow, after my experience with JSOD integration with Chrome Devtools, I feel encouraged to implement the above. The idea will be to add an Export Raw... and Import Raw... menu items to the above context menu. Export functionality will basically export the raw data behind the Network Panel. Import will create an Network Panel clone and load the data in it.I will develop the import functionality in a modular fashion so that it can be launched standalone.

I have started the work on this. The Google code git repository:

https://code.google.com/p/sandipchitaleschromedevtoolsrnd/

Current progress:

  • As seen above, I am now adding the Export Raw... and Import Raw... context menu items.
  • Able to capture the network raw requests.
  • Able to create the Imported Network Panel
  • With the following code I am able to export the requests in JSON format


  • JSON.stringify(this._requests, function(key, value) {
    if (value instanceof WebInspector.Target) {
            return;
            }
    return value;
    }, 4);

  • Now am able to import the data back.

TODO:

  • Export
    • Export the data in JSON format to a file or URL. 
  • Import
    • Convert it into WebInspector.NetworkRequest
    • Load the converted WebInspector.NetworkRequest into Imported Network Panel

Almost there. Stay tuned!

Friday, May 02, 2014

DevToolsApp

A simple Chrome Packaged App to try out different versions of Chome Devtools:








GitHub

To try this:
  • Download Chrome Canary (now works with standard Chrome)
  • Run it e.g.

> ...\AppData\Local\Google\Chrome SxS\Application\chrome.exe --remote-debugging-port=9222 --no-first-run --user-data-dir=C:\temp\devtoolsprofile

  • Load page to be debugged in it
  • Install DevToolsApp from Chrome Web Store.
  • Launch it. You will see a window like the first screenshot above.
  • Click on the run button.
  • You will see a screen like the second screenshot above.
  • Select the page to debug by clicking on it
  • Voila, it should load the selected devtools
It tries to get latest 25 branchs URLs from the below site from:

http://src.chromium.org/blink/branches/chromium/

Of course you are free to type branch number or even the whole devtools URL.

If you use the following Devtools URL you will be able to try out my Idea: Chome Devtools Network Panel export and import

https://sandipchitaleschromedevtoolsrnd.googlecode.com/git/Source/devtools/front_end/inspector.html
If you use the following Devtools URL you will be able to try out my JavaScript Object Diagram integration.

http://sandipchitaleschromedevtoolsstuff.googlecode.com/git/front_end/inspector.html

If you use the following Devtools URL you will be able to try out my enhancement to Chrome Devtools Scope Variables and Watches section.

http://chrome-developer-tools.googlecode.com/git/inspector/front-end/inspector.html


Feedback welcome.