Inspecting React Native’s Bridge Traffic

Inspecting the underlying communication traffic between React Native’s Javascript engine and iOS code can be pretty helpful when trying to debug what’s going on underneath the hood.

The best way I’ve seen to inspect this traffic is to turn on DEBUG_SPY_MODE in MessageQueue.js

var DEBUG_SPY_MODE = true;

or in newer versions of React-Native

let SPY_MODE = true;

Once turned on (and after restarting packager) you can then see the logs fill up with messages, like the following:

JS->N: RCTUIManager.createView([3,”RCTView”,{“flex”:1,”overflow”:”hidden”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([4,”RCTView”,{“flex”:1,”backgroundColor”:”transparent”,”overflow”:”hidden”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([5,”RCTView”,{“position”:”absolute”,”overflow”:”hidden”,”left”:0,”right”:0,”bottom”:0,”top”:0}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([6,”RCTView”,{“flex”:1}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([7,”RCTView”,{“onLayout”:true,”flex”:1}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([8,”RCTView”,{“flex”:1,”justifyContent”:”center”,”alignItems”:”center”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([9,”RCTView”,{“flex”:1,”backgroundColor”:”transparent”,”position”:”absolute”,”top”:0,”left”:0}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([10,”RCTView”,{“width”:240,”borderRightColor”:”#999",”borderLeftWidth”:1,”height”:568}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([12,”RCTView”,null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([13,”RCTStaticImage”,{“contentMode”:2,”src”:”g__icon_pattern”,”width”:360,”height”:150,”overflow”:”hidden”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([14,”RCTStaticImage”,{“contentMode”:2,”src”:”settings_g__logo”,”width”:182,”height”:30,”overflow”:”hidden”,”position”:”absolute”,”top”:50,”left”:25}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([15,”RCTText”,{“accessible”:true,”isHighlighted”:false,”position”:”absolute”,”top”:95,”left”:65,”color”:”white”,”textAlign”:”center”,”fontFamily”:”OpenSans”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([16,”RCTRawText”,{“text”:”Log in or Sign Up”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([15,null,null,[16],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([12,null,null,[13,14,15],[0,1,2],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([17,”RCTView”,{“accessible”:true,”borderWidth”:1,”borderTopColor”:”white”,”borderLeftColor”:”white”,”borderRightColor”:”white”,”borderBottomColor”:”#ccc”,”height”:40,”paddingTop”:8,”paddingLeft”:5,”flexDirection”:”row”,”alignItems”:”center”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([18,”RCTStaticImage”,{“contentMode”:2,”src”:”my_g_s_icons”,”width”:24,”height”:25,”overflow”:”hidden”,”left”:10,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([19,”RCTText”,{“accessible”:true,”isHighlighted”:false,”left”:50,”fontSize”:12,”color”:”#75787b”,”fontFamily”:”OpenSans”,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([20,”RCTRawText”,{“text”:”My g_s”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([19,null,null,[20],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([17,null,null,[18,19],[0,1],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([22,”RCTView”,{“accessible”:true,”borderWidth”:1,”borderTopColor”:”white”,”borderLeftColor”:”white”,”borderRightColor”:”white”,”borderBottomColor”:”#ccc”,”height”:40,”paddingTop”:8,”paddingLeft”:5,”flexDirection”:”row”,”alignItems”:”center”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([23,”RCTStaticImage”,{“contentMode”:2,”src”:”location_marker”,”width”:18,”height”:25,”overflow”:”hidden”,”left”:10,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([24,”RCTText”,{“accessible”:true,”isHighlighted”:false,”left”:50,”fontSize”:12,”color”:”#75787b”,”fontFamily”:”OpenSans”,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([25,”RCTRawText”,{“text”:”My Subscriptions”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([24,null,null,[25],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([22,null,null,[23,24],[0,1],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([26,”RCTView”,{“accessible”:true,”borderWidth”:1,”borderTopColor”:”white”,”borderLeftColor”:”white”,”borderRightColor”:”white”,”borderBottomColor”:”#ccc”,”height”:40,”paddingTop”:8,”paddingLeft”:5,”flexDirection”:”row”,”alignItems”:”center”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([27,”RCTStaticImage”,{“contentMode”:2,”src”:”cat_icon”,”width”:24,”height”:21,”overflow”:”hidden”,”left”:10,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([28,”RCTText”,{“accessible”:true,”isHighlighted”:false,”left”:50,”fontSize”:12,”color”:”#75787b”,”fontFamily”:”OpenSans”,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([29,”RCTRawText”,{“text”:”Development Mode”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([28,null,null,[29],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([26,null,null,[27,28],[0,1],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([30,”RCTView”,{“accessible”:true,”borderWidth”:1,”borderTopColor”:”white”,”borderLeftColor”:”white”,”borderRightColor”:”white”,”borderBottomColor”:”#ccc”,”height”:40,”paddingTop”:8,”paddingLeft”:5,”flexDirection”:”row”,”alignItems”:”center”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([32,”RCTStaticImage”,{“contentMode”:2,”src”:”invite_a_friend_icon”,”width”:20,”height”:25,”overflow”:”hidden”,”left”:10,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([33,”RCTText”,{“accessible”:true,”isHighlighted”:false,”left”:50,”fontSize”:12,”color”:”#75787b”,”fontFamily”:”OpenSans”,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([34,”RCTRawText”,{“text”:”Invite a friend”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([33,null,null,[34],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([30,null,null,[32,33],[0,1],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([35,”RCTView”,{“accessible”:true,”borderWidth”:1,”borderTopColor”:”white”,”borderLeftColor”:”white”,”borderRightColor”:”white”,”borderBottomColor”:”#ccc”,”height”:40,”paddingTop”:8,”paddingLeft”:5,”flexDirection”:”row”,”alignItems”:”center”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([36,”RCTStaticImage”,{“contentMode”:2,”src”:”customer_support_icon”,”width”:25,”height”:25,”overflow”:”hidden”,”left”:10,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([37,”RCTText”,{“accessible”:true,”isHighlighted”:false,”left”:50,”fontSize”:12,”color”:”#75787b”,”fontFamily”:”OpenSans”,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([38,”RCTRawText”,{“text”:”Customer Service”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([37,null,null,[38],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([35,null,null,[36,37],[0,1],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([39,”RCTView”,{“accessible”:true,”borderWidth”:1,”borderTopColor”:”white”,”borderLeftColor”:”white”,”borderRightColor”:”white”,”borderBottomColor”:”#ccc”,”height”:40,”paddingTop”:8,”paddingLeft”:5,”flexDirection”:”row”,”alignItems”:”center”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([40,”RCTStaticImage”,{“contentMode”:2,”src”:”about_g__icon”,”width”:25,”height”:25,”overflow”:”hidden”,”left”:10,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([42,”RCTText”,{“accessible”:true,”isHighlighted”:false,”left”:50,”fontSize”:12,”color”:”#75787b”,”fontFamily”:”OpenSans”,”position”:”absolute”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([43,”RCTRawText”,{“text”:”About g_”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([42,null,null,[43],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([39,null,null,[40,42],[0,1],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([10,null,null,[12,17,22,26,30,35,39],[0,1,2,3,4,5,6],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([9,null,null,[10],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([44,”RCTView”,{“flex”:1,”position”:”absolute”,”left”:0,”top”:0,”backgroundColor”:”transparent”,”width”:320,”height”:568}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([45,”RCTView”,{“removeClippedSubviews”:true,”flex”:1,”backgroundColor”:”#53a318",”justifyContent”:”center”,”overflow”:”hidden”,”width”:320}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([46,”RCTView”,{“marginTop”:20}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([47,”RCTView”,{“height”:40,”flex”:1,”flexDirection”:”row”,”alignItems”:”stretch”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([48,”RCTStaticImage”,{“accessible”:true,”contentMode”:2,”src”:”hamburger_icon”,”width”:18,”height”:16,”overflow”:”hidden”,”marginTop”:11,”marginLeft”:18}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([49,”RCTView”,{“accessible”:true,”width”:195,”backgroundColor”:”transparent”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([50,”RCTView”,{“flexDirection”:”row”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([52,”RCTStaticImage”,{“contentMode”:2,”src”:”nav4_search_bar_left”,”width”:34,”height”:30,”overflow”:”hidden”,”marginTop”:4,”marginLeft”:18}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([53,”RCTStaticImage”,{“contentMode”:0,”src”:”nav4_search_bar_middle”,”width”:135,”height”:30,”overflow”:”hidden”,”marginTop”:4,”resizeMode”:”stretch”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([54,”RCTStaticImage”,{“contentMode”:2,”src”:”nav4_search_bar_right”,”width”:14,”height”:30,”overflow”:”hidden”,”marginTop”:4,”marginRight”:18}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([50,null,null,[52,53,54],[0,1,2],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([55,”RCTText”,{“accessible”:true,”isHighlighted”:false,”fontFamily”:”OpenSans”,”color”:”#72c833",”position”:”absolute”,”top”:9,”left”:50,”backgroundColor”:”transparent”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([56,”RCTRawText”,{“text”:”Search g_”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([55,null,null,[56],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([49,null,null,[50,55],[0,1],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([57,”RCTStaticImage”,{“accessible”:true,”contentMode”:2,”src”:”cart_icon”,”width”:26,”height”:23.5,”overflow”:”hidden”,”marginTop”:7,”marginLeft”:16}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([58,”RCTStaticImage”,{“accessible”:true,”contentMode”:2,”src”:”notification_icon”,”width”:19,”height”:24,”overflow”:”hidden”,”marginTop”:7,”marginLeft”:15}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([47,null,null,[48,49,57,58],[0,1,2,3],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([59,”RCTView”,{“height”:40,”flexDirection”:”row”,”paddingBottom”:8}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([60,”RCTView”,{“accessible”:true,”flex”:1,”alignItems”:”center”,”justifyContent”:”center”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([62,”RCTText”,{“accessible”:true,”isHighlighted”:false,”color”:”white”,”fontFamily”:”OpenSans-SemiBold”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([63,”RCTRawText”,{“text”:”Featured”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([62,null,null,[63],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([60,null,null,[62],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([64,”RCTView”,{“accessible”:true,”flex”:1,”alignItems”:”center”,”justifyContent”:”center”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([65,”RCTText”,{“accessible”:true,”isHighlighted”:false,”color”:”#aedf8a”,”fontFamily”:”OpenSans-SemiBold”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([66,”RCTRawText”,{“text”:”Goods”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([65,null,null,[66],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([64,null,null,[65],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([67,”RCTView”,{“accessible”:true,”flex”:1,”alignItems”:”center”,”justifyContent”:”center”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([68,”RCTText”,{“accessible”:true,”isHighlighted”:false,”color”:”#aedf8a”,”fontFamily”:”OpenSans-SemiBold”}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([69,”RCTRawText”,{“text”:”Getaways”}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([68,null,null,[69],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([67,null,null,[68],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([70,”RCTView”,{“position”:”absolute”,”height”:3,”backgroundColor”:”white”,”bottom”:0,”width”:106.66666666666667}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([59,null,null,[60,64,67,70],[0,1,2,3],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([46,null,null,[47,59],[0,1],null])
MessageQueue.js:488 JS->N: RCTUIManager.createView([72,”RCTView”,{“flex”:1,”flexDirection”:”row”,”width”:960}])
MessageQueue.js:488 JS->N: RCTDataManager.queryData([“http”,{“method”:”GET”,”url”:”https://api.g_.comid%2Ctraits%2Cimages&zero_day=true","headers":{}},"h-5237178",7])
MessageQueue.js:488 JS->N: RCTUIManager.createView([73,”RCTView”,{“flex”:1,”justifyContent”:”center”,”backgroundColor”:”#f0f0f0",”width”:320}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([74,”RCTView”,{“alignItems”:”center”,”justifyContent”:”center”,”height”:36}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([75,”RCTActivityIndicatorView”,{“size”:”large”,”animating”:true,”color”:”#999999",”hidesWhenStopped”:true}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([74,null,null,[75],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([73,null,null,[74],[0],null])
MessageQueue.js:488 JS->N: RCTDataManager.queryData([“http”,{“method”:”GET”,”url”:”https://api.g_.com/v2/deals/search?offset=0&","headers":{}},"h-938281955",9])
MessageQueue.js:488 JS->N: RCTUIManager.createView([76,”RCTView”,{“justifyContent”:”center”,”backgroundColor”:”#f0f0f0",”width”:320}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([77,”RCTView”,{“alignItems”:”center”,”justifyContent”:”center”,”height”:36}])
MessageQueue.js:488 JS->N: RCTUIManager.createView([78,”RCTActivityIndicatorView”,{“size”:”large”,”animating”:true,”color”:”#999999",”hidesWhenStopped”:true}])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([77,null,null,[78],[0],null])
MessageQueue.js:488 JS->N: RCTUIManager.manageChildren([76,null,null,[77],[0],null])